谷歌浏览器插件开发笔记0.1.130

原创

已于 2025-06-26 14:15:29 修改 · 415 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2024-07-09 14:29:19 首次发布

谷歌浏览器插件开发笔记0.1.000

2024年7月20日09:57:08----0.1.051
2024年7月26日18:19:02----0.1.082
2024年7月27日10:44:42----0.1.103
2024年9月19日19:01:36----0.1.105
2025年6月25日14:58:24----0.1.106
2025年6月26日14:14:40----0.1.130

主要文件

共计有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

最低0.47元/天解锁文章

200万优质内容无限畅学