kekxv 技术博客

kekxv

0%

网页转换为chrome插件

发表于 更新于 分类于

chrome有一个特别棒的功能，叫做扩展程序，我们可以使用他来辅助我们浏览网页。
不过，别人的扩展程序用得多了，难免会想要整一个自己的扩展程序。
这里记录一下如何快速的将一个html 项目转换为扩展程序。
(除了传统的网页外，也执行现在流行vue或uniapp或taro等打包出来的html5的网页)

准备工作

我们可以先查看 官方的文档地址 , 了解一下写一个扩展程序需要做什么。
准备一个 html5 网页:

  • 可以是 uniapp 打包的h5 (npm run build:h5)
  • 可以是 taro 打包的h5 (npm run build:h5)
  • 可以是 vue2/vue3 打包的dist (npm run build)
  • 可以是其他前端项目

准备manifest.json文件

扩展程序需要有一个manifest.json文件，此 JSON 文件描述了扩展程序的功能和配置。具体请看https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world?hl=zh-cn

一个最简单的manifest.json文件为：

1
2
3
4
5
6
7
8
9
10
{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

然后我们对它进行简单的修改，符合我们的要求：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{
  "name": "扩展程序的名字",
  "version": "1.0",
  "manifest_version": 3,
  "description": "扩展程序的说明",
  "action": {
    // "default_popup": "index.html",
    "default_title": "鼠标移动到扩展程序的提示内容"
  },
  "background": {
    "service_worker": "service-worker.js" // 这里是 background 工作者文件
  },
  "side_panel": {                 // 使用侧边栏模式
    "default_path": "index.html"  // 侧边栏的入口页面，如果是打包的项目，一般都是这个啦
  },
  "icons": {                      // 这里是图标，有好几个级别，可以是同一个
    "64": "static/logo.png",
    "72": "static/logo.png",
    "144": "static/logo.png"
  },
  "content_scripts": [             // 这里是内容注入脚本的相关配置
    {
      "matches": ["https://*/*"],  // 注入到全部网址
      "css": [],
      "js": ["content-script.js"], // 注入的`js`文件
      "run_at": "document_start"   // 在什么时候进行注入，这里是最开始就注入上去了
    }
  ],
  "permissions": [ // 声明插件所需要的权限
    "contextMenus", // 右键菜单
    "tabs", // 标签
    "notifications", // 通知
    "webRequest", // web请求
    "storage", // 插件本地存储
    "sidePanel", // 插件本地存储
    //"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
    //"https://*/*", // 可以通过executeScript或者insertCSS访问的网站
    "cookies" // cookie信息
  ]
}

这个配置是作为侧边栏进行显示的，好处是，失去焦点的时候不会隐藏。

如果是弹出模式的话，使用以下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "name": "扩展程序的名字",
  "version": "1.0",
  "manifest_version": 3,
  "description": "扩展程序的说明",
  "action":  
  {  
      "default_icon": {
        "64": "static/logo.png",
        "72": "static/logo.png",
        "144": "static/logo.png"
      },  
      "default_popup": "index.html",   // popup 的入口
      "default_title":"抬头名称"  
  },  
  "icons": {
    "64": "static/logo.png",
    "72": "static/logo.png",
    "144": "static/logo.png"
    },
  "content_scripts": [             // 这里是内容注入脚本的相关配置
    {
      "matches": ["https://*/*"],  // 注入到全部网址
      "css": [],
      "js": ["content-script.js"], // 注入的`js`文件
      "run_at": "document_start"   // 在什么时候进行注入，这里是最开始就注入上去了
    }
  ],
}

对了由于chrome扩展插件的一些安全性考虑从而不支持内写script，需要修改一下html文件里面的内容。删除或修改包含内容的<script>节点。

侧边栏情况下的service-worker.js文件内容：

1
2
3
chrome.runtime.onInstalled.addListener(() => {
  chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
});

其实就是简单的，点击图标显示隐藏侧边栏。

content-script.js 内容一般根据自己的实际情况来写，可以要也可以不要，不要的话，就留空就好了。上面的这段，是为了做扩展程序与页面的通信，如果有这个功能的话，可以参考一下。

记得将这几个文件放到html的目录下。

测试

点开chrome的扩展程序管理，可以看到有一个按钮: 加载已解压的扩展程序 ，点击他，然后选择刚刚我们的目录。点击确定，便可以看到多了一个我们的扩展程序。
然后打开网页，点击看看效果。

如果使用popup模式，点击后发现页面很窄，则是宽度错误，可以给html文件里面的body节点或者最外层的节点，设置一下宽高，可以考虑使用:style="width:350px;height:600px;"。

扩展和网页间的通信

如果我们需要修改网页内容的话，直接修改是不行的，需要通过注入的js进行修改，这时候，就需要相互直接进行通信。

首先，我们需要将content-script.js文件加入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 支持的 host 列表
const hosts = [];

function initConnect() {
  if (hosts.indexOf(!window.location.host) === -1) return;
  console.log("content script init .");

  var port = chrome.runtime.connect({name: "content-server"});
  port.onDisconnect.addListener(function (...args) {
    console.log("onDisconnect", ...args)
  })
  port.postMessage({type: "connect"});
  port.onMessage.addListener(function (msg) {
    console.log(msg);
    console.log(document)
  });
}
initConnect();

然后在我们的扩展程序的代码里加上：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
window.kChromeServerPorts = window.kChromeServerPorts || {
    ports: [],
    callback: [],
    send(msg) {
        for (let key in window.kChromeServerPorts.ports) {
            let port = window.kChromeServerPorts.ports[key];
            try {
                port.postMessage(msg);
            } catch (e) {
                console.warn("port error:", port)
            }
        }
    }
}

function initChromeServer() {
  if (window.hasOwnProperty("initChromeServerInitFlag") && window.initChromeServerInitFlag) return;
  window.initChromeServerInitFlag = true;
  console.log("注册监听通道")
  chrome.runtime.onConnect.addListener(function (port) {
    console.assert(port.name === "content-server");
    window.kChromeServerPorts.ports.push(port);
    port.onMessage.addListener(function (msg) {
      for (let key in window.kChromeServerPorts.callback) {
        try {
          window.kChromeServerPorts.callback[key] && window.kChromeServerPorts.callback[key](msg);
        } catch (e) {
          console.warn("cb error:", window.kChromeServerPorts.callback[key])
        }
      }
    });
  });
}

try {
  initChromeServer();
} catch (e) {
  console.warn("kChromeServer:", e)
}

然后刷新一下扩展程序，再刷新一下网页，试试看效果。

参考文章

官方的文档地址 https://developer.chrome.com/docs/extensions?hl=zh-cn

chrome sidePanel 侧边栏模式 https://developer.chrome.com/docs/extensions/reference/api/sidePanel?hl=zh-cn#type-PanelBehavior

chrome 消息传递 https://developer.chrome.com/docs/extensions/develop/concepts/messaging?hl=zh-cn#connect

用uniapp编译chrome扩展程序（一）https://ask.dcloud.net.cn/article/39979