框架选择

Next-gen Web Extension Framework – WXT

WXT provides the best developer experience, making it quick, easy, and fun to develop web extensions. With built-in utilities for building, zipping, and publishing your extension, it’s easy to get started.

Get Started

Introduction to Plasmo – Plasmo

Plasmo is the end-to-end platform for browser extension developers - the easiest way to Build, Test and Ship browser extensions.

Plasmo Docs

如何实现 chrome extension 的热更新

在所有页面执行

"all_frames": true

网页与background通讯

发送端

export const sendMessageToBackground = (
  type: MessageType,
  payload?: any,
  target = [ReceiveTarget.IFRAME, ReceiveTarget.MAIN_WINDOW]
) => {
  const extensionId = 'ibknboednigkepnildpeeablokkgingp';
  const message = {
    type, // 类型
    payload, // 额外数据
    target,
  };
  // 先放进队列
  if (!GlobalStore.pluginLoaded) {
    messageQueue.push(message);
    return;
  }
  console.log('发送消息', message);

  chrome.runtime.sendMessage(extensionId, message, (response) => {
    console.log(response);
  });
};

接收端

// 外部通讯,比如来自web的消息通讯
chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) {
  sendToContent(request);
});

热更新

https://zhuanlan.zhihu.com/p/399937088