Chrome Plugin Development Record

because it is a learning record, not as a tutorial, so do not explain in detail, only the core part of the record .

List of general plug-ins required:

• Manifest.json-Plug-in configuration file, plug-in program entry.
• Icon.png-Small icons, it is recommended to use 19*19 translucent png, a better way is to provide a 38*38 translucent PNG as a large icon.
• Popup.html-pop-up page when clicking on the plugin icon.
• Popup.js-the JavaScript file referenced by the popup page.
  
  

Manifest.json:

1 {2         "name":"My Extension",//plug-in name3         "version":"versionstring",//plug-in version number4         "Description":"A Plain Text description",//Plugin Function Description5         "icons": { ... },//pictures, generally need three different resolutions of the picture: 16*16 48*48 128*1286         "Default_locale":"en",//Support Internationalization7         "browser_action": {//plug-in action configuration8                      "Default_icon":"Icon16.png",//options available9                      "Default_title":"Google Mail",//Optional, shown in ToolTipTen                      "Default_popup":"popup.html" //options available One          },   A         "page_action": { -                         "Default_icon": { -                                                  " +":"Cnblogs_19.png", the                                                  " -":"Cnblogs_38.png" -         }, -         "Default_title":"cnblogs.com Article Information"},    -         "Theme": {...},    +         "app": {...},      -         "Background_page":"afile.html",    +         "Chrome_url_overrides": {...},//Replace page A         "content_scripts": [...],    at         "Homepage_url":"Http://path/to/homepage",    -         "Incognito":"spanning"Or"Split",    -         "Key":"PublicKey",     -         "minimum_chrome_version":"versionstring",    -         "Omnibox": {"keyword":"astring" },     -         "Options_page":"afile.html",//configuration page for options in         "Permissions": [...],//permissions are important here, you need to use tabs, Windows, and so on to configure permissions here -         "Plugins": [...],//when interacting with DLLs, you need to configure them here to         "Update_url":"Http://path/to/updateInfo.xml"  +}

HTML file:

Background.html is mainly run in the background, it exists in the life cycle of the plugin, for example: You can put some persistent data into the background page, when needed can be obtained from the background page. Note that with background.html, you need to configure "Background_page" in the Manifest.json file: background.html.

Popup.html is the page that pops up when you click on the taskbar in the upper right corner of the Chrome browser or the plugin icon in the Address bar, you can work on the popup.html if you have the need to click the icon to pop up the bubble hint. The same use of popup.html will need to be configured in the Manifest.json file:

1 "browser_action": {2     "Default_icon":"Icon16.png", 3     "Default_title":"Cnblogs", 4     "Default_popup":"popup.html"5},

JS file:

Background: You can think of it as the main program of the chrome plugin, it is important to understand that once the plugin is enabled (some plugins are enabled for all pages, some are only enabled for certain pages). Chrome creates a separate JavaScript runtime (also called a run context) for the plugin to run the background script you specify.

Configuration method:

" background " " Scripts ": ["background.js"]}

Content_scripts: A script to be injected into a page that accesses the contents of the DOM and is used primarily to get and modify the contents of the page. By default, it runs when the page is loaded and the page script is finished and the page goes idle, but this can be changed.

Configuration method:

" content_scripts " : [    {      "js""content_script.js"  ]    }
]

Because the content script and background script are in different running environments, they cannot be accessed directly from each other, and communication between them passes through the message. For example:

Content script Gets the Web page information via Chrome.runtime.sendMessage (msg).

Background script obtains the information passed through the Chrome.runtime.onMessage.addListener (function (request, sender, SendRequest) {});

For more information, please refer to the official information: https://developer.chrome.com/extensions/index.html

Chrome Plugin Development Record