Service_Worker（Background）とContent_Script（DOM側）の関係が少し分かりにくかったので、書きとめておきます。
以下ではService_Workerをbackground.js、Content_Scriptをcontent.jsとファイル名で呼びます。
content.jsにはDOM（Document Object Model）とのやりとりに関するコード、background.jsにはその他の処理を記述する、と捉えると分かりやすいです。
content.jsとbackground.js間のやりとりはmessagesを介して行います。
background.jsからcontent.jsへは現在アクティブなtab情報を利用してmessagesを送るので、chrome.tabs.sendMessages APIを使います。
// background.js
function setListenerOnMenus() {
chrome.contextMenus.onClicked.addListener( async (info, tab) => {
chrome.tabs.sendMessage(tab.id, {
// some message. can be blank
something: "some message",
somethingElse: "another message"
}, (response) => {
// receiver of the message (content.js) can return a respond
// in a callback
// background.js can respond to that response here...
let context = response.context;
let url = response.url;
// do something with it!...
}
}
}// content.js
chrome.runtime.onMessage.addListener( (request, sender, sendResponse) => {
// request contains messages sent from background.js. Can retrieve as below...
let something = request.something;
let somethingElse = request.somethingElse;
// also, content.js can interact/manipulate DOM element and communicate it back to background.js
let url = window.location.href;
let context = window.getSelection().anchorNode.data;
// can communicate back in the callback below...
sendResponse({
context: context,
url: url
});
}background.jsにはonStartup listenerを追加することで、extension使用時に起動するようになります。
// background.js
chrome.runtime.onStartup.addListener(() => {
setup();
});