Chrome Plugin Development Record

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.