Chrome扩展程序为静态服务器

Question

Chrome扩展程序为静态服务器

use*_*716 2 javascript google-chrome-extension

我想制作一个chrome扩展,它只是提供来自定义目录的静态内容.像往常一样,静态目录将位于扩展存储库中.

我想在一个完整的标签中打开扩展程序.例如,我的油脂 - 猴子延伸部分是一个带有以网址开头的标签chrome-extension://.标签是阻止我的这个要求.

有人知道这样一个插件的例子吗？一个世界您好在新标签页的扩展会适合我的需要.

Answer 1

Mar*_*lli 6

选项卡内的扩展页面

这很容易实现:您所要做的就是创建一个基本扩展,其中包含一个包含page.html相关JavaScript和CSS文件的文件夹; 然后,您可以使用chrome.tabsAPI创建新选项卡并page.html在其中显示.

履行

按照这些步骤,您将能够打开一个新选项卡,其中包含您的扩展文件夹中托管的页面,其中包含以下URL chrome-extension://<id>/page/page.html:

为要显示的清单,背景和页面创建扩展名和相关文件.扩展名的目录应如下所示:
```
<root/>:
  - background.js
  - manifest.json
  - <page/>:
      - page.html
      - page.js
      - page.css
```
Run Code Online (Sandbox Code Playgroud)

创建一个manifest.json声明后台页面的简单文件:

{
    "manifest_version": 2,
    "name": "Some test",
    "version": "0",

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

Run Code Online (Sandbox Code Playgroud)

创建background.js脚本,您将在其中创建选项卡:
```
chrome.tabs.create({url: "/page/page.html"});
```
Run Code Online (Sandbox Code Playgroud)

创建page.html文件,这只是一个常规的html页面:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="page.css"/>
    </head>
    <body>
        <script src="page.js"></script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

创建page.js脚本,该脚本将在您的内部运行page.html,您可以在其中执行任何操作:
```
var h = document.createElement('h1');

h.textContent = 'Hello World!';
document.body.appendChild(h);
```
Run Code Online (Sandbox Code Playgroud)

结果

上面的结果将是这样的:

归档时间：	10 年，11 月前
查看次数：	813 次
最近记录：	10 年，8 月前