Skip to content

浏览器扩展

· 1 min

manifest.json#

入口文件，通过此文件加载相关配置

{
    // 加载文件的版本
    "manifest_version": 2,
    // 扩展名称
    "name": "demo",
    // 扩展版本
    "version": "1.0.0",
    // 扩展描述
    "description": "扩展",


    // devtools 页面入口，只能指向一个 HTML 文件
    "devtools_page": "devtools.html"
}

devtools#

// 创建自定义面板
chrome.devtools.panels.create(
    // panel标题
    "MyPanel",
    // 图标（设置也不显示）
    "img/icon.png",
    // 要加载的页面
    "mypanel.html",
    // 加载成功后的回调
    (panel) => {
        // 这个log一般看不到
        console.log("自定义面板创建成功！");
    }
);

runtime.onDisconnect#

There are no listeners for runtime.onConnect at the other end. The tab containing the port is unloaded (for example, if the tab is navigated). The frame where connect() was called has unloaded. All frames that received the port (via runtime.onConnect) have unloaded. runtime.Port.disconnect() is called by the other end. Note that if a connect() call results in multiple ports at the receiver’s end, and disconnect() is called on any of these ports, then the onDisconnect event is only fired at the port of the sender, and not at the other ports.

https://developer.chrome.com/docs/extensions/mv3/messaging/#port-lifetime

页面预渲染导致 runtime.onDisconnect#

在 chrome://newtab 页面输入链接不回车，会导致页面预渲染，当过一会回车时，content 对 background 建立的连接，会 background 断开。

解决方法：

不在预渲染阶段建立连接，

Page Lifecycle & Page Visibility 页面周期和页面可见性