當按鈕單擊 CHROME EXTENSION 時，如何從內容腳本打開選項頁面？

Question

當我單擊 content.js 中的按鈕時，我想打開我的擴展程序的選項頁面。

我試過這個，但沒有打開options.html。

有人能幫助我嗎？ 提前致謝

清單文件

"options_page": "options.html",

選項.html

   <p>hello world</p>

內容.js

let btt = document.querySelector('.settings-icon-hk');
btt.addEventListener('click', function(){
  window.open('../options.html')
  
})

Answer 1

您無法直接從content.js打開選項頁面。 您的瀏覽器將顯示一條錯誤消息。 相反，您需要向后台腳本發送一條消息並告訴它打開選項頁面：

內容.js：

let btt = document.querySelector(".settings-icon-hk");
btt.addEventListener("click", () => {
    chrome.runtime.sendMessage("showOptions");
});

背景.js：

chrome.runtime.onMessage.addListener((request) => {
  if (request === "showOptions") {
    [...]
  }
});

然而，如果您嘗試使用window.open('../options.html')打開options.html文件，瀏覽器將嘗試在該文件很可能不存在的服務器上打開該文件。 你必須告訴瀏覽器打開擴展的options.html文件： window.open(chrome.runtime.getURL('options.html'));

你必須告訴瀏覽器它應該打開擴展的 option.html 文件：

window.open(chrome.runtime.getURL('options.html'));

其實你不需要繞道而行，使用Chrome本身提供的功能：

chrome.runtime.openOptionsPage();

此函數的優點是它可以識別manifest.json的“ open_in_tab ”設置。

背景.js：

chrome.runtime.onMessage.addListener((request) => {
  if (request === "showOptions") {
    chrome.runtime.openOptionsPage();
  }
});

您可以在https://developer.chrome.com/extensions/options 上找到有關選項頁面的更多信息