前言
- 阅读本文，可以自己写一个简单的浏览器插件
- 以及前端浏览器插件相关东西
- 附上github源码：https://github.com/shuirongshuifu/browser-plugin
- 接下来学学这个不常用的知识点吧...
效果图
- 我们先看一下，自己手写的简单插件的操作效果图（点击弹出时间）
拓展程序部分
或者地址栏输入：chrome://extensions/ 回车直接访问
代码
manifest.json
manifest.json用了记录这个浏览器插件的相关信息
{
"manifest_version": 2,
"name": "点击获取当前的时间", // 插件名字
"version": "1.0", // 插件版本
"description": "这个插件可用于获取当前的年月日时分秒", // 关于这个插件的介绍
"browser_action": {
"default_popup": "popup.html", // 这个插件使用的弹出层的html
"default_icon": { // 这个插件固定在插件栏的图标（不同尺寸可以使用不同的图片）
"16": "icon.png",
"32": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
},
"icons": { // 插件卡片使用的图标（就是拓展中的插件卡片那个地方）
"16": "logo.png",
"32": "logo.png",
"48": "logo.png",
"128": "logo.png"
},
"permissions": [
"activeTab" // 激活的tab用
],
"content_scripts": [ // 往内容中注入脚本
{
"matches": [
"<all_urls>" // 针对于所有的地址都用
],
"js": [
"inject.js" // 注入的js脚本的文件名
]
}
]
}popup.html
给点击这个插件的弹出层，来一个简单的html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>time</title>
<style>
body {
text-align: center;
}
#clock {
font-size: 32px;
font-weight: bold;
background-color: #eee;
color: rgb(157, 81, 215);
box-sizing: border-box;
padding: 12px;
border-radius: 6px;
}
</style>
</head>
<body>
<div id="clock"></div>
<script src="popup.js"></script>
</body>
</html>popup.js
这里拆分出来js文件，当然也可以使用script标签，丢在一块
function updateClock() {
const clockElement = document.querySelector('#clock')
const currentTime = new Date();
clockElement.textContent = currentTime.toLocaleString();
}
setInterval(updateClock, 1000);inject.js
简单注入一个脚本，如下图：
// inject.js文件
console.log('直接注入的脚本内容，页面一加载就执行，要先打开F12控制台看哦');目录结构图：
未完待续...
参考文章
更多功能细节点，请见下方参考
chrome
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。