Summary of chrome plug-in technology development

The following is a development experience written by a chrome user.

This is also a summary, about all aspects of the chrome plug-in written in the last month.

When I browsed Douban on the first Saturday morning in early December, I was eager to write the chrome plug-in, because some pieces of JS scripts were previously written on Douban for webpages (Douban was built with jquery ), to implement some special JS scripts such as "Just look at the landlord" and "batch upload/download images, after reading the getting start tutorial of the chrome plug-in development documentation, I decided to directly convert the JS scripts I wrote into a program in the plug-in, so I started to study the chrome plug-in mechanism and related APIs.

Google Code: http://code.google.com/p/douban-demon/. you can download the full source code through svn. This includes two plug-ins: Douban Genie and RSS snack. The former has been updated slowly, the latter is a quick demo made during a university technical discussion about RSS to talk about the technical possibility of plug-in implementation. It has not been updated yet, however, this plug-in uses the jqueryui and custom chrome plug-in right-click function, which has a certain reference value.

The following is a summary of some tips on chrome plug-in technology. For more information, see the official documentation.

About manifest. JSON

The original manifest. JSON name is used to manage the core configuration file of the entire plug-in. The permission settings, name, version number, and all resources used for the plug-in must be specified here. below is the manifest. json of the Douban genie.

{"Name": "文", // extension name "version": "1.6.0", // version number (required for automatic update) "update_url": "http://douban-demon.googlecode.com/svn/updates.xml ", // compare configuration file for automatic update "Description": "[Douban genie] have any questions or suggestions, please contact russell.liuyi@gmail.com, or Douban ID: http://www.douban.com/people/3811658/", "options_page ": "html/options.html", // option page. "Permissions": ["tabs", "notifications", "http: // */*", "https: // */* "], // plug-in access permission. Tabs refers to the opened tab, notifications refers to the desktop pop-up window, and the other two are accessible links. "Background_page": "html/background.html", // The page running in the background, where all cross-origin requests should be executed. "Page_action": // some configuration of the plug-in icons {"default_icon": "image/demon-19.gif", "default_title": ""}, "content_scripts ": [// content_script.js only applies to which pages and which JS files are required {"matches": ["http: // * .douban.com/*", "http://api.t.sina.com.cn/oauth/*"], "JS ": ["JS/jquery. JS "," JS/jquery-ui.js "," JS/contentscript. JS "]," run_at ":" document_idle "," all_frames ": false}]," icons ": {" 48 ":" image/demon-48.gif "}}

Automatic agent upgrade

An XML file is required to record the configuration attributes of the upgrade.

You must specify an appid, which corresponds to the unique ID of the generated chrome plug-in. the PEM file is packaged with the extension program id, not the development version ID), and the version number. The following is an example of the Douban genie:

<?xml version='1.0' encoding='UTF-8'?>  <gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>    <app appid='hldoefihoaojobhlpfmnkjodjkmpicha'>      <updatecheck codebase='http://douban-demon.googlecode.com/files/DoubanDemon-v1.6.0.crx' version='1.6.0' />    </app>  </gupdate>  

Cross-origin request submission

Chrome prohibits cross-origin submission of Ajax requests (unless in the jsonp mode), but Ajax requests can be directly submitted across domains on the backgroupd page of the plug-in! .

In addition, some websites are directly forbidden to submit post data across domains. Therefore, you need to use the APIS provided by these websites to implement the corresponding functions, if the verification method is acceptable, try to use oauth once and for all.

About localstorage

Programmers can program and store the user's browser data. That is to say, even if the user closes the browser, the localstorage data will still exist when the user opens the browser again. However, if the user clears all browser data and cookies, the data in localstorage disappears.

Each website has its own localstorage stored in the chrome cache. The plug-in still saves a non-conflicting localstorage. That is to say, if the contentscript in Douban is. if you want to perform the localstorage operation in JS, you can only get the localstorage of Douban, but not the localstorage of the plug-in. If you want to perform the localstorage read/write operation on the plug-in, you need to use chrome. extensions. sendmessage.

In addition, localstorage can only store two-dimensional data. However, JSON. parse (normalstring) can be used to decompress more complex JSON data. JSON. stringify (jsonstring) can be used to serialize a json data string.

About oauth Protocol

For details about the oauth protocol, refer to the RFC document or the oauth official website. The following are some tips I can remember during the study:

The official oauth document indicates that all oauth implementations can be stored in HTTP header, post form, or URL get. However, many websites only support one of the AIPS, for example, Douban and Sina APIs are stored in HTTP headers, while the oauth data of Tencent Weibo APIs can only be appended with URLs as GET request data. This requires you to carefully view the API documentation of the corresponding website to avoid any mistakes.

When calculating the signature, some data must be stored in the basicstring for signature. For example, if Sina Weibo publishes a new microblog, the published content must be transcoded and the status is used as the key, the content becomes part of the basicstring as the value, and then the signature is calculated. In addition, the parameter order cannot be incorrect during signature. Otherwise, the signature authentication fails.

Although the API oauth authentication documents of many websites are not detailed, they can still be found on their websites where errors are prone. Once an error occurs, check the document to see if there are any special prompts, so that errors can be detected more quickly.

This article is from: donnki's blog