无法在选项卡重新加载和选项卡更改之间保持Chrome扩展的状态

mcvgt66p 于 2023-02-01 发布在 Go

关注(0)|答案(1)|浏览(198)

我试图创建一个非常简单的chrome扩展，使我能够使用水平滚动浏览器来回导航。我希望能够启用和禁用扩展;然而，我希望当标签改变时（无论活动标签是一个新的url还是一个新的标签被启动），状态保持不变。
下面是我当前的代码，仅部分适用于活动标签：
manifest.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"
  }
}

background.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，但是我根本不能让这个工作。不确定这是否是正确的道路。
任何帮助都很感激...谢谢！

google-chrome

来源：https://stackoverflow.com/questions/75280302/unable-to-persist-state-of-my-chrome-extension-between-tab-reloads-and-tab-chang

1条答案

按热度按时间

ny6fqffe1#

1.将状态保存到存储中。由于localStorage在service worker中不可用，因此您可以使用chrome.storage.local。
1.注册/取消注册内容脚本，以便它在下次加载选项卡时自动运行。
1.使用executeScript处理所有选项卡，以将更改应用于当前加载的页。
1.对wheel侦听器使用全局函数，并在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);
  }
}

赞(0）回复(0）举报 2023-02-01

我来回答

无法在选项卡重新加载和选项卡更改之间保持Chrome扩展的状态

1条答案

相关问题

热门标签

最新问答