从 Chrome 扩展中的 options.js 向 background.js 发送消息

Question

I can find plenty of questions for sending a message from Bbackground to content scripts or from popup to background scripts, but I can't find any on how to send a message from options.js (triggered from my options page) to background.js for my Chrome extension我可以找到很多关于将消息从 Bbackground 发送到内容脚本或从弹出窗口发送到后台脚本的问题，但我找不到任何关于如何从options.js （从我的选项页面触发）发送消息到background.js对于我的 Chrome 扩展

manifest.js

{
  ...
  "manifest_version": 3,
  "permissions": [
    "alarms",
    "contextMenus",
    "notifications",
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "options_page": "options.html",
  "icons": {
    "48": "/assets/icons/icon-48.png",
    "128": "/assets/icons/icon-128.png"
  }
}

Code in options.js options.js中的代码

// Save options
document.querySelector('#save').addEventListener('click', ()=> {
  // Check for selected regions
  let selectedRegions = [];
  regionChecks.forEach(elm => {
    if (elm.checked)
      selectedRegions.push(elm.id.replace('region-', ''))
  });
  // Save selections
  chrome.storage.sync.set({ 'regions': selectedRegions });

  // Check for refresh period
  let refreshPeriod = document.querySelector('#refresh');
  if (refreshPeriod) {
    refreshPeriod = parseInt(refreshPeriod.value);
    if (refreshPeriod === NaN) {
      refreshPeriod = 5;
    } else if(refreshPeriod < 2) {
      refreshPeriod = 2;
    } else if (refreshPeriod > 120) {
      refreshPeriod = 120;
    }
    // Save period
    chrome.storage.sync.set({ 'refresh': refreshPeriod });
  }

  // Loop through features and remove if region gone
  chrome.storage.local.get(['features'], featuresData => {
    let featureCount = 0;
    if (featuresData.features) {
      featureSet = featuresData.features;
      Object.keys(featureSet).forEach(key => {
        if (!selectedRegions.includes(featureSet[key].Region)) {
          delete featureSet[key];
        } else if (featureSet[key].Status !== "read") {
          featureCount = featureCount + 1;
        }
      });
      // Update features data
      chrome.storage.local.set({ 'features': featureSet });
      // Update the badge
      if (featureCount > 0) {
        chrome.action.setBadgeText({ text: featureCount.toString() });
      } else {
        chrome.action.setBadgeText({ text: '' });
      }
    }
  });

  // Trigger an update
  chrome.runtime.sendMessage('', {
    type: 'update'
  });

  // Close the options page
  close();
});

Code in background.js background.js中的代码

// Listen for messages
chrome.runtime.onMessage.addListener(data => {
  console.log(data);
  if (data.type === 'update') {
    scheduleRequest();
  }
});

But nothing is happening但什么也没有发生

I've tried using tabs.sendMessage , but even if I put tabs in permissions it tells me that it isn't defined when I add it to the function chrome.tabs.sendMessage(tabs[0].id, {...我试过使用tabs.sendMessage ，但即使我将tabs放在权限中，它也会告诉我当我将它添加到函数chrome.tabs.sendMessage(tabs[0].id, {...

Answer 1

My test results contradict your claim.我的测试结果与你的说法相矛盾。

manifest.json清单.json

{
  "manifest_version": 3,
  "name": "hoge",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "options_page": "options.html"
}

background.js背景.js

// Listen for messages
chrome.runtime.onMessage.addListener(data => {
  console.log(data);
  if (data.type === 'update') {
    console.log("hoge")
    //    scheduleRequest();
  }
});

options.js选项.js

// Trigger an update
chrome.runtime.sendMessage('', {
  type: 'update'
});

options.html选项.html

<html>
<body>
  options page
  <script src="options.js"></script>
</body>
</html>

Answer 2

After some input from @woxxom and @Norio, and a little bit more troubleshooting, this is how I managed to get it to work在@woxxom 和@Norio 的一些输入以及更多的故障排除之后，这就是我设法让它工作的方法

option.js:选项.js：

// Trigger an update
chrome.runtime.sendMessage({ type: 'update' }, result => {
  // Close the options page
  close();
});

I had to move the close();我不得不移动close(); event into the return function so it didn't prematurely close off the code.事件进入返回函数，这样它就不会过早地关闭代码。 I also had to have a paramter in the return function for some reason otherwise it wouldn't run with an empty arrow function.出于某种原因，我还必须在返回函数中有一个参数，否则它不会使用空箭头函数运行。

background.js:背景.js：

// Listen for messages
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'update') {
    startRequest(true).then(sendResponse);
    return true;
  }
});

My function to be triggered in the background.js file was already an async promise function, so I had to add a .then() for the onMessage response function to trigger once it had run.我在background.js文件中触发的函数已经是一个异步承诺函数，所以我必须为onMessage响应函数添加一个.then()以在它运行后触发。 It also wouldn't work without having return true;如果没有return true; in there.在那里。

从 Chrome 扩展中的 options.js 向 background.js 发送消息

问题描述

2 个解决方案

解决方案1
0 2022-12-01 00:20:07

解决方案2
0 已采纳 2022-12-18 19:59:58

从 Chrome 扩展中的 options.js 向 background.js 发送消息

问题描述

2 个解决方案

解决方案1 0 2022-12-01 00:20:07

解决方案2 0 已采纳 2022-12-18 19:59:58

解决方案1
0 2022-12-01 00:20:07

解决方案2
0 已采纳 2022-12-18 19:59:58