码迷,mamicode.com
首页 > 其他好文 > 详细

[FE] Chrome Extension 五步曲

时间:2019-12-24 20:30:18      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:network   rod   round   images   modify   develop   manifest   cto   different   


1. Create the manifest.json

Only three fields is needed.

{
    "name": "Getting Started Example",
    "version": "1.0",
    "manifest_version": 2,
    "description": "xx"
}


2. Add instruction (background.js)

Create and register a background.js for manifest.json to reference.

{
    "name": "Getting Started Example",
    "version": "1.0",
    "manifest_version": 2,
    "description": "xx",
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "permissions": ["storage"]
}


So, what the means of "persistent" set to false ?

The only occasion to keep a background script persistently active is if the extension uses chrome.webRequest API to block or modify network requests.

The webRequest API is incompatible with non-persistent background pages.


Most APIs, must be registered under the "permissions" field in the manifest for the extension to use them.

3. Introduce a User Interface (popup.html)

<!DOCTYPE html>
  <html>
    <head>
      <style>
        button {
          height: 30px;
          width: 30px;
          outline: none;
        }
      </style>
    </head>
    <body>
      <button id="changeColor"></button>
    </body>
  </html>


Like the background script, this file needs to be designated as a popup in the manifest under page_action.
Toolbar icon is in the default_icons under page_action.
Management page icon is in the icons.

{
    "name": "Getting Started Example",
    "version": "1.0",
    "manifest_version": 2,
    "description": "xx",
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "permissions": ["storage"],
    "page_action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "images/get_started16.png",
            "32": "images/get_started32.png",
            "48": "images/get_started48.png",
            "128": "images/get_started128.png"
        }
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
}


4. Logic layer (popup.js)

<!DOCTYPE html>
<html>
    ...
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>


5. Give Users Options

Start by creating a file in the directory called options.html
Create a file called options.js in the extension directory with the logic.

<!DOCTYPE html>
  <html>
    <head>
      <style>
        button {
          height: 30px;
          width: 30px;
          outline: none;
          margin: 10px;
        }
      </style>
    </head>
    <body>
      <div id="buttonDiv">
      </div>
      <div>
        <p>Choose a different background color!</p>
      </div>
    </body>
    <script src="options.js"></script>
  </html>


Then register the options page in the manifest,

  {
    "name": "Getting Started Example",
    ...
    "options_page": "options.html",
  }

 

Ref:https://developer.chrome.com/extensions/getstarted

Link:https://www.cnblogs.com/farwish/p/12093314.html

[FE] Chrome Extension 五步曲

标签:network   rod   round   images   modify   develop   manifest   cto   different   

原文地址:https://www.cnblogs.com/farwish/p/12093314.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!