浏览器插件的开发

文章目录

构成
使用vue编写插件
插件中向其他服务器发送请求

官方文档地址： 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",
    "128": "images/icon-128.png"
  }
}

API配置文档：https://developer.chrome.com/docs/extensions/reference/api/accessibilityFeatures
通过多种方式构建扩展程序项目；不过，唯一的前提条件是将 manifest.json 文件放在扩展程序的根目录中。

js文件：content_scripts声明的js文件，包含插件的主要逻辑，主要是对目标网站做一些DOM和BOM操作。

backgrounds.js文件：service_worker声明的js
该文件用于处理扩展程序一些监听事件，如插件安装，更新等。
eg：

// 插件安装完之后执行的一些操作
chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});
//插件更新之后执行的一些操作
chrome.runtime.onUpdateAvailable.addListener(() => {
  chrome.runtime.reload();
});

使用vue编写插件

可以使用vue编写插件，只是manifest.json中”content_scripts“ 字段对应的”js“是vue打包后的代码路径。

固定vue打包的包名：
一般情况下vue打包的包名是动态改变的，但是如果他作为”content_scripts“ 字段的参数我们希望他是静态的，所以需要在打包的时候做一些配置：
vue.config.js

 chainWebpack: (config) => {
  // 指定打包的名字
    config.output.filename("js/[name].js").end();
    config.plugin("MiniCssExtractPlugin").use(
      new MiniCssExtractPlugin({
        filename: "css/[name].css", //输出文件名 ,地址名
      })
    );
    // babel-polyfill:用于在旧版本的浏览器中添加缺失的功能和新的 JavaScript API 的垫片（polyfills）
    config.entry("main").add("babel-polyfill");
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => ({
        ...options,
        compilerOptions: {
          // 将任何以ion-开头的标签视为自定义元素
          isCustomElement: (tag) => ["marquee"].includes(tag),
        },
      }));
  },

manifest.json
manifest.json清单中将vue打包生成的所有js，css文件都一起引入：

"content_scripts": [
        {
            "js": [
                "dist/js/app.js",
                "dist/js/chunk-vendors.js",
                "dist/js/main.js",
                "dist/js/681.8ccf3896.js"
            ],
            "css": [
                "dist/css/app.css"
            ],
        }
    ],

这样就可以了。

插件中向其他服务器发送请求

在插件中可以使用axios发送请求，但是如果目标服务器的地址不是当前浏览器页面的地址的时候需要使用 chrome.runtime.sendMessage将请求转发到background.js，在该文件中使用chrome.runtime.onMessage.addListener监听并转发请求。

插件逻辑中发送请求：

chrome.runtime.sendMessage(
        {
          type: "postData",
          url: `目标地址`,
          data: params,
        },
        (res: any) => {
          if (!res) {
            message.error("Please check if you are logged into the system.");
          }
         }
  )

backgrounds.js中接受请求

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "postData") {
    const url = `${request.url}`;
    fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(request.data),
    })
      .then((response) => response.json())
      .then((json) => sendResponse(json))
      .catch((err) => sendResponse(err));
  } else if (request.type === "getData") {
    const url = `${request.url}`;
    fetch(url, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((response) => response.json())
      .then((json) => sendResponse(json))
      .catch((err) => sendResponse(err));
  }
  return true;
});