Chrome 扩展作为静态服务器

Question

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

我希望扩展程序在完整选项卡中打开。例如，我的 grease-monkey 扩展程序会打开一个带有 url 且以 chrome-extension:// 开头的选项卡。 tab就是这个要求挡住了我

有人知道这种插件的例子吗？新选项卡扩展中的 hello world 可以满足我的需要。

Answer 1

选项卡内的扩展页面

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

实施

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

为manifest、background 和要显示的页面创建扩展名和相关文件。扩展的目录应该如下所示：
```
<root/>:
  - background.js
  - manifest.json
  - <page/>:
      - page.html
      - page.js
      - page.css
```

创建一个简单的 manifest.json 文件声明背景页面：

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

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

创建 background.js 脚本，您将在其中创建选项卡：
```
chrome.tabs.create({url: "/page/page.html"});
```

创建 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>

创建 page.js 脚本，它会运行在你的 page.html 中，你可以在那里做任何你想做的事：
```
var h = document.createElement('h1');

h.textContent = 'Hello World!';
document.body.appendChild(h);
```

结果

上面的结果将是这样的：

Chrome 扩展作为静态服务器

Chrome extension as static server

javascript

google-chrome-extension

选项卡内的扩展页面

实施

结果