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

Question

I'm writing a content script for a site and I'm trying to add a link a page in my extension in the site navbar. I tried this

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]);

It shows correctly with the right URL, but when I click on it it goes to the blank page with the URL about:blank . If I copy the URL of the link and paste in the omnibar I get the page I want, so I think there is some sort of mechanism to prevent webpages to linking to chrome-extension?

Is there any way to link it correctly ?

---

Edit: This is the extension. I'm trying to add a link in the navbar of http://beta.jisho.org/ to <extension>/options/options.html/ . The content script for that site is jisho-kioku/beta-jisho.js .

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

PS: I don't think the information above is of much value, though :/

Answer 1

You can take a step sideways and instead have your event page open the options page.

Content script:

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"});
}

Event page:

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")}
      );
    }
    /* ... */
  }
}