无法在选项卡重新加载和选项卡更改之间保留我的 chrome 扩展程序的 state

Question

我正在尝试创建一个非常简单的 chrome 扩展，使我能够使用水平滚动来回浏览浏览器。 我希望能够启用和禁用扩展； 但是我希望 state 在选项卡更改时保持不变（无论活动选项卡是新的 url 还是启动了新选项卡）。

这是我当前的代码，仅部分适用于活动选项卡：

清单.json：

{
  "name": "SwipeNav",
  "action": {},
  "manifest_version": 3,
  "version": "0.1",
  "description": "Navigates browser forward and back with 2 finger swiping",
  "permissions": [
    "activeTab",
    "scripting",
    "tabs",
    "alarms"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

背景.js

function twoFingerBack() {
    console.log("Enabling 2 finger scrolling");
    
    let timer;

    window.addEventListener("wheel", function(event) {
        clearTimeout(timer);
        if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
            timer = setTimeout(function() {
                if (event.deltaX > 0) {
                    history.back();
                } else if (event.deltaX < 0) {
                    history.forward();
                }
            }, 200);
        }
    });
}

function removeExt() {
    console.log("Disabling 2 finger scrolling");
    window.removeEventListener("wheel", removeExt)

}

let enabled = true;
chrome.action.onClicked.addListener((tab) => {
    enabled = !enabled;
    if (enabled) {
        if (!tab.url.includes("chrome://")) {
            chrome.scripting.executeScript({
                target: { tabId: tab.id },
                function: twoFingerBack
            });
        }
    } else {
        if (!tab.url.includes("chrome://")) {
            chrome.scripting.executeScript({
                target: { tabId: tab.id },
                function: removeExt
            });
        }
    }
});

我读过我可以使用chrome.tabs.onActivated但是我根本无法让它工作。 不确定那是否是正确的道路。

任何帮助表示赞赏...谢谢！

Answer 1

1. 将 state 保存在存储器中。 由于localStorage在 service worker 中不可用，您可以使用chrome.storage.local 。
2. 注册/注销内容脚本，以便下次加载选项卡时自动运行。
3. 使用 executeScript 处理所有选项卡以将更改应用到当前加载的页面。
4. 为车轮侦听器使用全局 function 并在removeEventListener中使用它的名称。

//清单.json

• 在"permissions"中添加"storage" ”
• 添加"host_permissions": ["<all_urls>"]

// 背景.js

chrome.action.onClicked.addListener(async (tab) => {
  let {enabled} = await chrome.storage.local.get('enabled');
  enabled = !enabled;
  chrome.storage.local.set({enabled});
  await chrome.scripting.unregisterContentScripts({ids: ['foo']});
  if (enabled) {
    chrome.scripting.registerContentScripts([{
      id: 'foo',
      js: ['content.js'],
      matches: ['<all_urls>'],
      runAt: 'document_start',
    }]);
  }
  const execOpts = enabled ? {files: ['content.js']} : {func: removeExt};
  const tabs = (await chrome.tabs.query({}))
    .sort(t => t.active ? -1 : 0); // processing the active tab(s) first
  for (const {id} of tabs) {
    chrome.scripting.executeScript({target: {tabId: id}, ...execOpts})
      .catch(() => {});
  }
});

function removeExt() {
  console.log('Disabling');
  // onWheel is the name of the global function used in content.js 
  window.removeEventListener('wheel', onWheel);
}

// 内容.js

let timer;
console.log('Enabling');
window.addEventListener('wheel', onWheel);
function onWheel(e) {
  clearTimeout(timer);
  const x = e.deltaX;
  if (x && Math.abs(x) > Math.abs(e.deltaY)) {
    timer = setTimeout(() => x > 0 ? history.back() : history.forward(), 200);
  }
}