如何从内容脚本链接到我的扩展程序中的页面？答案

【问题标题】：How do I link to a page in my extension from a content script?如何从内容脚本链接到我的扩展程序中的页面？
【发布时间】：2014-07-07 22:44:14
【问题描述】：

我正在为网站编写内容脚本，并尝试在网站导航栏中的扩展程序中添加页面链接。我试过这个

var linksListEl = document.querySelector("#top_bar .links");
var newLink = document.createElement("li");
newLink.innerHTML = '<a href="' + chrome.extension.getURL("options/options.html") + '">Kioku</a>';
linksListEl.insertBefore(newLink, linksListEl.children[0]);

它正确显示正确的 URL，但是当我单击它时，它会转到 URL about:blank 的空白页面。如果我复制链接的 URL 并粘贴到多功能栏中，我会得到我想要的页面，所以我认为有某种机制可以防止网页链接到 chrome-extension？

有什么方法可以正确链接？

编辑：这是扩展名。我正在尝试在http://beta.jisho.org/ 的导航栏中添加一个链接到<extension>/options/options.html/。该站点的内容脚本是jisho-kioku/beta-jisho.js。

https://github.com/odraencoded/jisho-kioku

P.S.： 不过，我不认为上面的信息有多大价值：/

【问题讨论】：

options/options.html 是否列在 web_accessible_resources 下？
@abraham 不是，我现在添加了它，但没有任何效果。
您能提供一个 JSFiddle 吗？
@L.Monty 我认为这行不通。我不认为chrome.extension.getURL 可以在 JSFiddle 中工作......我将发布一个指向我的扩展存储库的链接，这是否足够好？

标签： javascript google-chrome-extension content-script

【解决方案1】：

您可以采取措施，让您的活动页面打开选项页面。

内容脚本：

var linksListEl = document.querySelector("#top_bar .links");
var newLink = document.createElement("li");
newLink.innerHTML = '<a href="#" id="optionsLink">Kioku</a>';
linksListEl.insertBefore(newLink, linksListEl.children[0]);
document.querySelector("#optionsLink").addEventListener("click", showOptions);

function showOptions(){
  chrome.runtime.sendMessage({type : "show-options"});
}

活动页面：

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.type == "show-options") {
      chrome.tabs.update( // Or open a new tab if desired
        sender.tab.id, 
        {url: chrome.runtime.getURL("options/options.html")}
      );
    }
    /* ... */
  }
}

【讨论】：