谷歌浏览器插件开发笔记0.1.000
- 示例文件
- manifest.json
- popup.html
- options.js
- options.html
- content.js
- background.js
- 网页按钮快捷键插件
- api使用基础
- 参考链接
示例文件
共计有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>
api使用基础
- chrome.runtime在脚本中都可以直接使用
- chrome.tabs当前发现是在background脚本使用没有问题，其他还没试过；在content js的脚本中报错
- chrome.bookmarks 在content js的脚本中报错，在background脚本中可以使用
- chrome.notifications background不报错但是没效果；不能在content js用
- 不同脚本中通信
background脚本和content脚本之间
// content script
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {console.log(response.farewell);
});// background script
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {if (request.greeting == "hello")sendResponse({farewell: "goodbye"});});
参考链接
https://zhuanlan.zhihu.com/p/645191421
https://blog.csdn.net/z_344791576/article/details/4106300
https://blog.csdn.net/weixin_44786530/article/details/136515237
