浏览器插件的开发

官方文档地址： https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=zh-cn

构成

插件目录的主要构成：

• manifest.json文件：描述了扩展程序的功能和配置
  有如下几个常用配置：

  • name：扩展程序名字
  • icons: 声明扩展程序图标
  • manifest_version： 扩展程序版本
  • content_scripts：声明插件的主要执行代码，入口文件

  {
       
       
    "content_scripts": [
      {
       
       
        "js": ["scripts/content.js"], //执行的js文件
        "css": [], //执行的css文件
        "matches": [ // 需要在哪些网站上使用该插件
          "https://developer.chrome.com/docs/extensions/*",
          "https://developer.chrome.com/docs/webstore/*"
        ]
      }
    ]
  }
  

  由于插件运行在浏览器中，所以在content_scripts声明的js代码中可以获取到当前页面的所有内容，可以对页面的DOM进行操作。

  • background：配置插件本身的一些js代码

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

  • action：用于声明 Chrome 应用作扩展程序的操作图标的图片，以及当用户点击扩展程序的操作图标时在弹出式窗口中显示的 HTML 页面。

  {
       
       
    "manifest_version": 3,
    "name": "Hello Extensions",
    "description": "Base Level Extension",
    "version": "1.0",
    "action": {
       
       
      "default_popup": "hello.html",
      "default_icon": "hello_extensions.png"
    }，
    "icons": {
       
       
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "48": "images/icon-48.png",