chrome插件开发流程（超全）

对于一直从事前端开发者的你，在未开发过任何插件的前提下，肯定会很想知道，chrome插件开发和普通网页开发有什么区别呢？ 如何从0开始着手开发chrome插件呢？下面跟随这片文章来一起学习chrome插件的开发的流程吧～

首先，这几个网站你必须要提前了解：

chrome插件开发官方文档：https://developer.chrome.com/docs/extensions/mv3/

chrome扩展程序调试地址：chrome://extensions/ （注意：需要打开开发者模式）

chrome应用商店：https://chrome.google.com/webstore/category/extensions

chrome插件其实就是使用前端语法+调用chrome浏览器的API开发的，所以我们必须得了解chrome浏览器的API以及文件结构。

步骤1： 启用开发者模式

在chrome浏览器中，打开扩展程序页面chrome://extensions/，启用开发者模式，如图所示：

步骤2:  创建插件清单文件manifest.json

manifest.json清单文件此JSON文件描述插件的功能和配置，是必须配置的，位于项目根目录

2.1 基本配置

{
      “manifest_version”: 3, 插件版本，现在都用3了，后面就会不再支持版本2
      “name”: “Hello Extensions”, 插件名称
      “description”: “Base Level Extension”, 插件描述
      “version”: “1.0”,  插件开发版本
    }

2.2 action : 声明插件图标和点击后展示的页面

{
    …
     “action”: { 
        “default_popup”: “hello.html”,  点击扩展图标时，弹出的HTML页面
        “default_icon”: { 用于指定插件在不同位置的默认图标
             “16”: “images/icon16.png”,
             “32”: “images/icon32.png”,
             “48”: “images/icon48.png”,
             “128”: “images/icon128.png”
         }  
      }，
      “icons”: { 当用户在 Chrome Web Store 中浏览插件或在安装插件时看到插件的图标时，会使用 icons 指定的图标
        “128”: “icons/icon128.png”,
        “48”: “icons/icon48.png”,
        “16”: “icons/icon16.png”
      },
    }

2.3 声明内容脚本content_scripts，这个也是manifest.json很重要的一点

{
      …
      “content_scripts”: [
        {
          “js”: [“scripts/content.js”], 内容脚本路径
          “matches”: [
            “https://developer.chrome.com/docs/extensions/*”, 需要插入内容脚本的网址
          ]
        }
      ]
    }

注意：matches里面匹配的网址后面要带*，除非你只在这个网站某个固定网址使用，否则都加*，不然会出现content.js加载失败，无法插入到该网站中，如果要支持所有网站，则设置"matches": ["<all_urls>"]

2.4 service_worker : 在后台监听浏览器事件（service_worker是特殊的javascript环境，加载它处理事件并在不需要时终止）

{
      …
      service_worker: “scripts/background.js”
    }

2.5 host_permissions: 插件可以与特定主机进行通信、访问和修改网页内容

{
    ...
    "host_permissions": [
      "https://example.com/*",
      "http://www.example.org/",
      "https://api.example.net/"
    ]
}

例如我们需要在service_worker.js文件中获取某个网站缓存的数据，则首先需要在清单文件中“host_permissions”声明该网站，然后才能获取，如下所示

chrome.runtime.onInstalled.addListener(() => {
        chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {    
            chrome.tabs.get(tabId, async(updatedTab) => {
                const url = new URL(updatedTab.url);
                if (url.hostname === ‘example.com’) {                      
                    // 在控制台打印存储的数据         
                    const data = await chrome.scripting.executeScript({
                        target: { tabId: tab.id },
                        function: () => {
                            return {                         
                                userInfo: sessionStorage.getItem(‘userInfo’),
                            };
                        }
                    });
                                
                    if(data && data.length){                     
                        userInfo = JSON.parse(data[0].result.userInfo);                    
                    }
                }  
            });
        });
    });

步骤3: 开发插件功能

根据插件的需求，创建相应的 HTML、CSS 和 JavaScript 文件，
使用 JavaScript 编写插件的逻辑和功能。您可以通过 DOM 操作、事件处理和与chrome API 的交互来实现所需的功能。

步骤4: 加载和调试

加载插件：首先在chrome浏览器地址栏输入chrome://extensions/开发扩展程序页面，点击左上角的“加载已解压的扩展程序”，把自己本地的文件夹直接导入进去，如下图所示。

调试service_worker.js文件

调试popup.js文件

鼠标点击插件，点击右键菜单会出现“审查弹出内容”，即可进行调试

调试content_script.js文件

打开manifest.json中配置content_script对应的网站地址，F12打开调试，如果下方出现了你开发的插件名称以及文件，则代表你的页面成功插入该网站，在console中即可进行调试

步骤5: 打包和发布插件

chrome中也支持自己打包文件，打包之后生成后缀为.crx的文件，然后把.crx结尾的插件导入到浏览器，但是未发布的插件，开关无法打开，一直处于置灰状态，导致无法使用，查看详情才知道Chrome 只允许使用 Chrome 应用商店中发布的扩展程序
相关说明文档如下：https://support.google.com/chrome_webstore/answer/2811969?visit_id=638279384706503272-341708265&p=ui_remove_non_cws_extensions&hl=zh-Hans&rd=2

注册以及发布流程如下：
chrome应用商店点击注册，就会看到如下图所示。首先同意左侧的开发者协议和政策，然后去支付注册费5美元进行注册。

这个注册支付，不能用国内的银行卡以及信用卡，要用Visa卡，没有的话也没关系，可以直接去淘宝买一个。

chrome应用商店注册成功之后，先把本地文件压缩为.zip格式，点击上传即可（最多支持发布20个插件）。

上传成功后，需要你填写一些关于插件相关信息，填写完整之后右上角的“提交审核”按钮才会高亮，然后就能提交审核了。

注意chrome插件的公开范围越广，审核时间越长。

常用的chrome API

chrome.runtime:提供与插件运行时环境交互的功能，包括管理插件的生命周期、发送消息、注册事件监听器等。

chrome.extension:这个 API 已被废弃，不推荐使用。它提供了一些与插件相关的功能，例如获取插件的 URL、向页面注入脚本等。相应的功能可以使用 chrome.runtime 替代。
 
chrome.tabs: 允许与浏览器标签页进行交互，包括获取当前标签页信息、打开新标签页、切换标签页、执行脚本等。

chrome.windows: 允许与浏览器窗口进行交互，包括获取当前窗口信息、打开新窗口、切换窗口、调整窗口大小等。

chrome.storage: 提供持久化存储功能，用于在插件中保存和检索数据，包括使用

chrome.storage.local : 进行本地存储和 chrome.storage.sync 进行跨设备同步。

chrome.runtime.sendMessage: 用于在插件组件之间发送消息，可以实现不同组件之间的通信和数据传递。

chrome.runtime.onMessage:注册消息监听器，用于接收其他组件发送的消息，并进行相应的处理。
 
chrome.browserAction:允许在浏览器工具栏中创建图标按钮，并定义与按钮相关的交互行为，例如点击按钮时打开弹出窗口或执行特定操作。

chrome.contextMenus: 允许在浏览器右键菜单中添加自定义菜单项，并定义菜单项的点击行为。

chrome.webRequest: 允许拦截和修改网络请求，包括请求的头部、URL、响应内容等，以实现网络请求的修改和过滤。

chrome.notifications:允许在操作系统通知区域显示通知，以向用户发送系统级别的提示和提醒。

chrome.identity: 提供身份验证和用户信息相关的功能，例如使用 OAuth2 进行用户身份验证。