关键字: chrome扩展、chrome extensions、chrome插件操作dom
今天来自己实现添加一个chrome扩展。
版本
- 83.0.4103.61（正式版本） （64 位）
入口
- chrome://extensions/
- chrome -> 更多工具 -> 扩展程序
- 打开开发者模式，点击加载已解压的扩展程序
manifest文件
首先要有一个JSON格式的manifest文件
{
"manifest_version": 2,
"name": "登录",
"version": "1.0",
"description": "描述文案",
"browser_action": {
"default_icon": "images/login.png",
"default_title": "鼠标悬浮文案",
"default_popup": "popup/index.html"
},
"background": {
"scripts": ["background/background.js"]
},
"permissions": [
"contextMenus"
],
"icons": {
"48": "images/login.png",
"128": "images/login.png"
},
"content_scripts": [{
"matches": ["*://*/*"],
"js": ["content.js"]
}]
}
1，以下三个字段为必须：
manifest_version -- 表示manifest文件自身格式的版本号, 需指定为2
name -- 用来标识扩展的简短纯文本。
version -- 扩展的版本,用一个到4个数字来表示，中间用点隔开。
2，icons配置扩展管理页面使用的图标。图标要求是png格式，通常是128x128或48x48的图标。
"icons":
{
"48": "icon48.png",
"128": "icon128.png"
}
扩展信息图
3，background
背景页是一个运行在扩展进程中的HTML页面。它在你的扩展的整个生命周期都存在，可以用来管理一些任务或者状态，比如使用背景页来在Chrome的右键菜单中增加自己的菜单项.
"background": {
"scripts": ["background.js"]
}
浏览器的扩展系统会自动根据上面scripts字段指定的所有js文件自动生成背景页。
如果您的确需要自己的背景页，可以使用page字段，比如：
"background": {
"page": "background.html"
}
4，Context Menus
用于在Chrome的右键菜单中增加自己的菜单项。
1）首先必须在清单中声明“contentMenus”权限。
"permissions": [
"contextMenus"
]
2）通过id 和 parentId来构建父子菜单关系，onclick声明点击后的回调函数。
const menu = {
"menus": [
{"id": "main", "title": "login" },
{"id": "login", "title": "填充密码", "parentId": "main", onclick: () => cb('login')}
]
};
const createMenu = () => {
menu.menus.forEach(value => {
chrome.contextMenus.create(value);
})
};
createMenu()
5，Browser Actions
可以在chrome主工具条的地址栏右侧增加一个图标。
"browser_action": {
"default_icon": "images/login.png",
"default_title": "点我",
"default_popup": "popup/index.html"
}
default_icon -- 展示icon。
default_title -- 鼠标悬浮icon上时浮现的文案。
default_popup -- 用来创建点击图标后弹出的选项内容html。
该html中可以引用js文件，来增加你想增加的交互逻辑。需要注意的是，此时你无法与浏览器当前所访问页面的元素进行交互。也就是说，无法对当前web页面的dom元素进行操作。
但你可以通过使用messages机制来进行通信，先获取当前tab信息，然后通过chrome.tabs.sendMessage把信息传递出去。由Content Scripts进行接收执行。
- popup/index.html
<body>
<li id="login">popup选项</li>
<script src="./index.js"></script>
</body>
- index.js
const login = document.getElementById('login');
login.addEventListener('click', ()=> {
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
var activeTab = tabs [0];
chrome.tabs.sendMessage(activeTab.id, { action: "login" })
})
})
6, Content Scripts
在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。
"content_scripts": [{
"matches": ["*://*/*"],
"js": ["content.js"]
}]
通过chrome.runtime.onMessage可以接收传递的信息，并执行相应的dom操作。
chrome.runtime.onMessage.addListener(function(request, sender, sendMessage) {
if (request.action == "login"){
// action
}
网友评论