老伍的官方文档

主题

2024-01-312025-09-19
826
3.2m
0

Chrome插件开发基础 ​

清单文件 ​

manifest.json，主要根据里面的内容来介绍一些基本概念！

name ​

插件的名称

description ​

插件的描述信息

version ​

插件的版本号

manifest_version ​

目前统一为3

可选配置 ​

icons ​

提供插件的不同尺寸的图标，用于不同的页面显示，比如插件管理页面用48x48的图标、工具栏页面使用16x16的图标，系统会根据情况尝试使用最佳尺寸。图标通常应采用 PNG 格式，因为 PNG 能够最好地支持透明度，也支持 BMP、GIF、ICO 和 JPEG。注意：不支持 WebP 和 SVG 文件。

建议提供： 128x128、48x48、16x16的图标。

示例：根路径为manifest.json所在目录，下同。

json
{
  "icons": {
    "16": "icon16.png",
    "32": "icon32.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

action ​

定义插件图标在工具栏中的外观和行为。

  • default_icon：插件在工具栏中默认显示的图标

  • default_title：鼠标在工具栏图标hover时显示的文字，比如这里是 "click me"

  • default_popup：点击图标后弹出的HTML页面，html文件不能运行内联js脚本，只能加载js文件。

    示例："popup.html"

    html
    <html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

background ​

指定包含扩展程序的Service Worker的js脚本。

  • service_worker：在后台处理并监听浏览器事件，还会响应扩展程序事件，如导航到新页面、点击通知或关闭标签页等。可使用所有chrome API，但是不能访问网页Dom。

    示例：

    json
    {
    "background": {
      "service_worker": "background.js"
    }
}

content_scripts ​

指定在用户打开某些网页时要使用的 JavaScript 或 CSS 文件。可以访问网页的Dom，因此可以修改网页内容。不能访问扩展页面（即点击插件图标所弹出的页面，如上为popup.html）的Dom，但是可以进行通信。

  • js：js文件列表
  • css：css文件列表
  • matches：必填，指定匹配的页面列表，即只针对匹配的页面进行Dom操作。

示例：

json
{
 "name": "My extension",
 "content_scripts": [
   {
     "matches": ["https://*.nytimes.com/*"],
     "css": ["my-styles.css"],
     "js": ["content-script.js"]
   }
 ]
}

options_ui ​

选项页面，通常为用户提供对插件的一些自定义设置。options_page只支持整页展示。可通过右键工具栏插件图标的菜单栏中的选项访问页面，或者在浏览器扩展程序管理中插件详情里面的扩展程序选项访问。

  • page：指定选项页面html文件
  • open_in_tab：为true表示新建一个tab标签页以整页形式展示，为false则以嵌入形式（弹窗）展示。弹窗并不是在当前页面弹窗，而是在扩展程序管理页面的插件详情中弹窗。

示例：

json
{
  "options_ui": {
        "page": "options.html",
        "open_in_tab": true
    }
}

permissions ​

允许使用特定的扩展程序 API。可用于告知用户此插件需要使用哪些权限等。

总结 ​

入门比较重要的几个概念：

  • content_scripts：内容脚本，操作网页Dom
  • service_worker：后台脚本，不能操作网页Dom
  • popup页面：点击插件图标所弹出的页面

这三者之间是可以相互通信的。

注意

更新插件后，记得刷新页面！