标签内的扩展页面

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

实施

按照这些步骤，您将能够打开一个新标签页，其中包含您的扩展程序文件夹中托管的网页，其中包含chrome-extension://<id>/page/page.html这样的网址：

为清单，背景和要显示的页面创建扩展名和相关文件。扩展名的目录应如下所示：

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

结果

以上结果将是这样的：

result

Chrome扩展程序为静态服务器

1 个答案:

标签内的扩展页面

实施

结果