chrome write plug-ins need to understand a few concepts and methods

1, plug-in file structure
1.1、manifest.json

Each extension can be installed in the WebApp, the skin, there is a JSON-formatted manifest file, which kept important information about plug-ins.

A basic configuration examples:

{
    "name": "browser action demo",
    "version": "1.0",
    "permissions": [
        "tabs", "http://*/*", "https://*/*" ], "browser_action": { "default_title": "开关灯", "default_icon": "icon.png", "default_popup": "popup.html" }, "background": { "page": "background.html" }, "manifest_version": 2 }
1.2、popup

Pop widget configuration above the browser_action in default_popup is this page.

1.3、background page

The vast majority of applications contains a background page (background page), used to perform the main function of the application.

1.4、Content scripts

Allows applications and interactive web pages by content script, content script refers to a Javascript internal page has been loaded in the browser can run. The content script can be seen as part of a webpage, rather than part of it in the application.

The interaction between the 2 files

popup pop background page can call the function directly.

Content script can read and modify the current dom tree web page, but it does not modify its application dom tree in the background of the page (background) of.

Content script and interaction between applications: can send messages to each other

3, injection JS (Content scripts) files for the web page:

A method, in manifest.json file configuration:

"content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"] } ],

The second method by executeScript ():

Inject JavaScript script execution to the page.

chrome.tabs.executeScript(integer tabId, object details, function callback)
chrome.tabs.executeScript(tabId, {file: "func.js", allFrames: true});

Guess you like

Origin www.cnblogs.com/zhishaofei/p/11818248.html