当按钮单击 CHROME EXTENSION 时，如何从内容脚本打开选项页面？答案

【问题标题】：How to open Options page from content script when button click CHROME EXTENSION?当按钮单击 CHROME EXTENSION 时，如何从内容脚本打开选项页面？
【发布时间】：2020-09-04 10:15:26
【问题描述】：

当我点击 content.js 中的按钮时，我想打开我的扩展程序的选项页面。

我试过了，但没有打开 options.html。

有人可以帮帮我吗？提前致谢

manifest.json

"options_page": "options.html",

options.html

   <p>hello world</p>

content.js

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

【问题讨论】：

标签： javascript google-chrome-extension options

【解决方案1】：

您无法直接从content.js 打开选项页面。您的浏览器将显示一条错误消息。相反，您需要向后台脚本发送消息并告诉它打开选项页面：

content.js：

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

background.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”设置。

background.js：

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

您可以在 https://developer.chrome.com/extensions/options 找到有关此选项页面的更多信息

【讨论】：