javascript - Chrome extension as static server

I would like to make a chrome extension that simply serve static content from a defined directory. As usual the static directory will be in the extension repository.

I would like the extension to open in a plete tab. For example, my grease-monkey extension opena a tab with a url that starts with chrome-extension://. The tab is this requirement that blocks me.

Someone know an example of such a plugin? A hello world in a new tab extension would fit my needs.

I would like to make a chrome extension that simply serve static content from a defined directory. As usual the static directory will be in the extension repository.

I would like the extension to open in a plete tab. For example, my grease-monkey extension opena a tab with a url that starts with chrome-extension://. The tab is this requirement that blocks me.

Someone know an example of such a plugin? A hello world in a new tab extension would fit my needs.

Share Improve this question edited Apr 21, 2015 at 23:37 Marco Bonelli 69.6k21 gold badges126 silver badges145 bronze badges asked Feb 5, 2015 at 23:07 user983716 2,0921 gold badge25 silver badges32 bronze badges

1 Probably duplicate with this one: stackoverflow./questions/14251008/…, stackoverflow./questions/12359608/… – Dayton Wang Commented Feb 5, 2015 at 23:27
thanks, I'll look at it and close the question as duplicate if it answer my question – user983716 Commented Feb 5, 2015 at 23:37
Actually, the linked question is not exactly the same. Bellow answer is exactly what I wanted. – user983716 Commented Feb 6, 2015 at 18:14

Add a ment |

1 Answer 1

Sorted by: Reset to default 10

Extension page inside a tab

This is pretty easy to achieve: all you have to do is to create a basic extension with a folder containing the page.html and the relative JavaScript and CSS files; then you can use the chrome.tabsAPI to create a new tab and display the page.html inside it.

Implementation

Following these steps, you'll be able to open a new tab containing a page hosted in your extension folder, which will have an URL like chrome-extension://<id>/page/page.html:

Create an extension and the relative files for the manifest, background and the page you want to display. The extension's directory should then look like this:
```
<root/>:
  - background.js
  - manifest.json
  - <page/>:
      - page.html
      - page.js
      - page.css
```

Create a simple manifest.json file declaring the background page:

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

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

Create the background.js script, where you will create the tab:
```
chrome.tabs.create({url: "/page/page.html"});
```

Create the page.html file, which is just a regular html page:

<!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>

Create the page.js script, which will run inside your page.html, and where you can do whatever you want:

var h = document.createElement('h1');

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

Result

The result of the above will be something like this:

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Chrome extension as static server - Stack Overflow

1 Answer 1

Extension page inside a tab

Implementation

Result

与本文相关的文章

评论列表(0)