chrome扩展如何在新标签页打开自己附带的一个html页面？

Question

如图是chrome的fatkun扩展的页面，当我们调用了这个扩展的下载功能时，它会打开这个页面，这个页面是放在扩展文件夹里的。

现在我不知道如何新标签页里打开扩展文件夹里的指定html文件……这个是要在新标签页打开的，不是popup.html，求教

Answer 1

我最近也在写 chrome plugin，今天之前我也一直有这个疑问，今天看了看别人的文章，貌似不能直接打开...,不过你可以在触发下载事件时，通过 background 打开,大概类似这样：

//background.js
chrome.browserAction.onClicked.addListener(function(tab){
  var newURL = "https://segmentfault.com/";
  chrome.tabs.create({ url: newURL });
});

当然你得保证你有配置 background 入口：

//manifest.json
"background":{
  "scripts": ["background.js"]
}

我想你应该想在新页面展示你下载的相关数据，这个好像要配置 content_scripts:

//manifest.json
"content_scripts":[{
        "matches":["https://www.segmentfault.com/*"],
        "js":["content_script.js"]
    }]

配置好后就可以在你指定域下插入 content_script.js,然后通过某些方法就可以跟 plugin 通信,具体可看下相关 API，或者看下别人的这个教程。

以上没来得及实践，不保证可行。

Answer 2

同样在写拓展，同样遇到了这个问题。参考了楼上的方案后发现可以把自己要打开的页面设置为“选项”页面，然后通过background.js打开。如下：

// background.js
chrome.browserAction.onClicked.addListener(
    function () {
        if (chrome.runtime.openOptionsPage) {
            // New way to open options pages, if supported (Chrome 42+).
            chrome.runtime.openOptionsPage();
        } else {
            // Reasonable fallback.
            window.open(chrome.runtime.getURL('options.html'));
        }
    }
);

manifest.json添加入口：

"background": {
        "scripts": ["background.js"]
    },
"options_page": "要打开的页面"

这样配置后，点击拓展的图标即可打开目标页面。不过占用了选项页，算是一个有缺陷的解决方案吧。

Answer 3

打开本地页面貌似只能写在 background.js 中：

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.create({ url: chrome.runtime.getURL('result.htm') });
});

Answer 4

直接写就好了。
manifest.json

"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "./options.html"
},
"background": {
    "page": "./dist/index.html"
},

options.html

...
<script scr="options.js"></script>
...

options.js

chrome.tabs.create({url: chrome.extension.getURL('./dist/index.html')});

dist/index.html

...
<div>123</div>
...