谷歌浏览器插件开发笔记0.1.000
示例文件
共计有6个常用的文件
manifest.json
background字段：随着浏览器的打开而打开，随着浏览器的关闭而关闭, 通常把需要一直运行的、启动就运行的、全局的代码放在里面。它没办法控制页面元素，但可以通过 content_script 告诉它
content_scripts：当访问到设置的url时会执行js的代码，这里设置的是在文档加载完时执行
browser_action：点击浏览器插件图标会弹出的页面
options_page：插件的设置页面，一般会显示到浏览器的右上方，点击对应插件后面的竖向三点
web_accessible_resources：用于指定哪些扩展资源文件可以被网页访问
{
"manifest_version": 2,
"name": "按钮热键设置",
"description": "设置页面上按钮的快捷键",
"version": "1.0",
"permissions": [
"activeTab",
"storage",
"https://*.mywebsite.com/*"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["https://*.baidu.com/*"],
"js": ["content.js"],
"run_at": "document_end"
}
],
"browser_action": {
"default_popup": "popup.html",
"default_title": "Open the popup"
},
"options_page": "options.html",
"web_accessible_resources": [
"script.js",
"style.css"
]
}
popup.html
点击插件图片弹出的页面
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to My Extension!</h1>
</body>
</html>
options.js
点击插件选项弹出的页面里加载的js文件
document.getElementById('save').onclick = function() {
var color = document.getElementById('bgColor').value;
chrome.storage.sync
.set({backgroundColor: color});
};
alert("option")
options.html
点击插件选项弹出的页面
<!DOCTYPE html>
<html>
<body>
<h1>Extension Options</h1>
<label>Background color: <input type="text" id="bgColor"></label>
<button id="save">Save</button>
<script src="options.js"></script>
</body>
</html>
content.js
匹配到当前浏览器标签的url时执行的js
window.onload = function() {
var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++) {
links[i].style.color = 'red';
}
};
background.js
当前重新加载插件执行的js？
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'document.body.style.backgroundColor="green"'
});
});
alert("background")
网页按钮快捷键插件
这是我基于上面的内容，制作自己的第一个插件，功能就是在特定页面的按钮上加一个快捷键的功能
background.js
alert("加载插件成功")
content.js
$(document).ready(function() {setTimeout(function() {console.log($("button").length)$("button").each(function(index,value){var in18=$(value).attr("i18n");if(in18=="EBG.Srdetail.button.Save"){console.log($(value).attr("i18n"))console.log(index)$(value).attr("AccessKey","m")}});}, 4000);});
jquery-2.0.0.min.js
这个文件自己下载就行了
manifest.json在这里插入代码片
{
"manifest_version": 2,
"name": "快捷保存",
"description": "主要是忍受不了保存内容的时候，还要用鼠标去点击！！！安装该插件后，进入到xxx页面，ALT+M组合健执行保存功能",
"version": "1.0.0",
"permissions": [
"activeTab"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["https://eplus.huawei.com/ecare/msr/sr/*"],
"js": ["jquery-2.0.0.min.js","content.js"],
"run_at": "document_end"
}
],
"browser_action": {
"default_popup": "popup.html",
"default_title": "快捷保存插件说明"
}
}
popup.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>说明</title>
</head>
<body>
<p>针对如下链接有效：https://xxxx</p>
<p>在页面加载完成后生效。</p>
<p>2024-07-10 xxxx</p>
</body>
</html>
参考链接
https://zhuanlan.zhihu.com/p/645191421
https://blog.csdn.net/z_344791576/article/details/4106300
https://blog.csdn.net/weixin_44786530/article/details/136515237