Chrome plugin (Extensions) Development strategy

Directory

1. Why do I need

2. Why Chrome?

3. What to prepare

4. How to get Started

5. Page Action

6. Chrome plugin Structure

7. Learning materials

8. My example

9. Debugging

• Debug Content Scripts

• Debug background

• Debug Popup

• Some questions

10. Summarize

Why do I need

Simply put, the browser plugin can greatly extend the functionality of your browser. including but not limited to these features: capturing the content of a particular webpage, capturing HTTP messages, capturing user browsing actions, changing the behavior of interface elements such as browser address bar/start page/bookmark/tab, communicating with other sites, modifying Web content ... To give you a lot of space to imagine, think about it, you can use it to identify some of the ad code on the site, and directly delete the code, so you will not be bothered by the ads, yes, as you wish, such a plugin has been developed, you can directly use. However, the drawback of the browser plugin, that is: there will be some security risks, but also may make your browser slow or even unstable.

Why Chrome?

Because Chrome's plug-in is the simplest to develop, there is no new technology on the whole, the development language is Javascript,web front-end engineers can quickly get started, and Firefox plug-in development is much more complex, involving the environment and some outside the Web technology IE plug-in development is more complex, need to be familiar with C + + and COM technology, of course, install Microsoft's visual Studio.

Here is an article written by a foreigner, compared to the plugins developed by Chrome, Opera and Firefox: http://blog.nparashuram.com/2011/10/writing-browser-extensions-comparing.html.

It should be said that Chrome and opera plug-in development is not difficult, but Firefox is more tricky, perhaps you have to ask, then why Firefox plugin is the richest? I think there are some historical reasons, Chrome comes out late after all, and several other browsers provide plug-ins are not the same function, OK, we still have to go back to it.

What to prepare

Almost 0 of the demand. Chrome browser and a text editor, the text editor is best with syntax highlighting. Google is so generous to those of us who do technology.

How to get Started

It is strongly recommended to look at the official note: https://developer.chrome.com/extensions/getstarted.html.

Article not long, follow the article to do, after completion, you have successfully developed the first chrome plugin, this plugin will pop up a small window, showing some puppy small pictures.

This plugin has a total of 4 files:

• Manifest.json-All plugins must have this file, this is the plugin's configuration file, can be considered as the "portal" plugin.

• Icon.png-Small icons, it is recommended to use 19*19 translucent PNG images, it is better to provide a 38*38 translucent PNG image as a large icon, in the example I provided later, I just do that.

• Popup.html-is the pop-up page of the puppy you see.

• Popup.js-the JavaScript file referenced by the puppy page.

Never mind, I didn't look carefully. There is a small comment in the popup.html, which says: For security reasons, JavaScript must be stored separately from HTML . And I think, a small test program, there is no need to separate it, write directly together is not OK? As a result, JavaScript can not be executed, I can't find the reason, also thought pop-up small window does not support JavaScript, search on the internet for half a day and no results, finally found that is the reason, wasted a lot of time, this thing also to some extent explained: Details determine success or failure.

The content in Manifest.json is also very obvious, and I choose several of these properties to say:

{"Manifest_version": 2, "name": "One-click Kittens", "description": "This extension demonstrates a browser action with Kittens. "," Version ":" 1.0 "," Permissions ": [" https://secure.flickr.com/"]," browser_action ": {" Default_icon ":" Icon.png "," Default_popup ":" Popup.html "}}

"Manifest_version": now should always be 2.

"Permissions": Very important thing, that is, allow plug-ins to do what things, access to which sites, if a plug-in "permissions" written in "http://*.hacker.com/", Then this plugin is allowed to visit all the content on hacker.com, including some of your personal information may be submitted to hacker.com, the risk is self-evident, to see a plugin can access those sites is: in the Address bar of Chrome enter "chrome:// extensions/"(Note: This page we want to use frequently, please bookmark), and then click the corresponding plugin next to the" permissions ", such as:

"Default_popup": Used to specify which HTML is displayed by default in a small window that pops up when a small icon is clicked, and the popup window is called "popup".

"Browser_action": This is a browser-level action, that is, regardless of which page you are visiting now, the small button is always displayed, and our plug-in if only for certain pages, it is not suitable for this "browser_action". Let's get a little button that only appears when you visit the blog Park (www.cnblogs.com).

Page Action

chrome-plugin-page-action-demo.7z

The plugin has only 4 files, two of which are icons, leaving only one Manifest.json and one background.js to go.

Mainifest.json:

 {      "manifest_version": 2,      "name":  " Cnblogs.com viewer ",     " version ": " 0.0.1 ",     " Background ": { " scripts ":  [" Background.js "] },     " Permissions ":  ["tabs"],      "Page_action": {            "Default_icon": {                 "Cnblogs_19.png":  ",         "        ": "         "Cnblogs_38.png"    },           "Default_title":  " Cnblogs.com article information "     }} 

Note: Here is the "page_action" instead of the "browser_action" attribute.

"Permissions" Property in the "tabs" is necessary, otherwise the following JS can not get to the URL in the tab, and this URL is we determine whether to show the small icon to come out of the basis. What is the concept of background? This is a very important thing, you can think of it is the Chrome plugin main program, understand this is critical, once the plug-in is enabled (some plugins are enabled for all pages, some are only enabled for some pages), Chrome opens up a separate JavaScript runtime (also called the Run context) for the plugin to run the background script you specify, in this case, background.js.

Background.js

host = "null" (url = = "Undefined" | | = = = Regex =/.*\:\/\/([^\/]*). */match = (match! = "undefined" &&!== match[1 (Getdomainfromurl (tab.url). Tolowerca SE () = = "Www.cnblogs.com"

In the code, we used a regular expression to match the URL, get the domain part of it, if the domain part is "www.cnblogs.com", then the small icon show out, the effect is as follows:

Of course, if you order that little icon now, there is no response, and I did not provide the popup as the official example provides. OK, now it's time to describe the structure of the chrome plugin.

Chrome plugin Structure

Need to declare that this structure is my own painting, on behalf of my understanding of the chrome plug-in, may not be comprehensive, or even not very accurate, but find out to find the ready-made, have to do their own, if there is a fallacy, please do not hesitate to point out.

, Manifest.json as a plug-in configuration file, but also as the "portal" of the program, because it specifies what icon is displayed, what files are background script, what files are in the content script, what the pop Up page is, and so on.

What is popup, what is background script, I believe everyone knows, what is content script? Content script is the script we want to inject into the page, the plugin allows us to inject script into the page, this is a very imaginative function, its powerful function without much explanation, in general, let us fully interfere with the content of the page! You may soon think that this can be a big security risk, yes, some malicious plug-ins will steal your page information, and some vulnerable plug-ins may let you suffer from cross-site script injection (XSS) attack, another possibility you will think of the problem is: to the page to inject their own script, Isn't there a conflict with the page's original script? I think you're really good at this point, and if our injection script is in the same running environment as the page's original script, there's a real conflict, so Chrome opens up a separate running space for our content script to use, content Script accesses the contents of the DOM, but does not have access to the original script (I mean direct access), otherwise the page's original scripts do not have direct access to content script. In the diagram, the light red background block represents the environment of the content script, while the light blue background block represents the page running environment, the other plug-in operating environment I use light green, note that this is three different operating environment, debugging when you will fully appreciate the difference between them.

So, when will the Content script run? By default, when the page is finished loading and the page script is finished, the page goes idle (Document idle), but this can be changed, the details can refer to https://developer.chrome.com/extensions/ content_scripts.html, view the "Run_at" in it.

Because the Content script and background script cannot directly access each other because they are in different environments, how do they communicate? by message! This will be in the code later.

Learning materials

After understanding the chrome plugin structure, I believe you are fully capable of developing a plugin of your own, of course, you have to go to google some information, here I share my method.

First of all, the official information must be seen, https://developer.chrome.com/extensions/index.html, the above information should be roughly browsed (do not need to look closely), so you can understand some terminology, know how to find your solution.

Moreover, the official offer of an example can be seen, https://developer.chrome.com/extensions/ samples.html, I found that some of the above examples can not be used in the new version of Chrome, but it doesn't matter, you just need to find what you want to do, do not have to try, according to your needs, select a few of your interests to see.

What should I do if I have a problem? Of course, Google to find the problem, but here I most strongly recommend stackoverflow.com, this is a problem-solving artifact! Not much to explain, used to know.

The learning process is basically: look at a bit, write code, debug debugging. You can do it. Well, the premise of course is that you have to have JavaScript on the ground. (You: hehe, you are kidding me!) ）

My example

Chrome-plugin-cnblogs-article-information.zip

Chrome-plugin-cnblogs-article-info-server.zip (server side, PHP code)

Well, it's my turn to be the example. Its function is this: when you browse the blog park, it will start and try to get the information you browse the article (title, author and date), and then send the request to another server, record and get the first time you visit this article, the information of this time and the article is displayed on the popup. Sounds like a boring feature, but the key is to demonstrate,

This plugin a total of 9 files, the new file has two (others believe that everyone is familiar with), one is "content_script.js", which is mentioned in the previous content script, to get and modify the contents of the page depends on it; Jquery-2.0.0.min.js ", the famous jquery, I like to use the JS library, the idea is" write Less,do more ", can help me to reduce a lot of code, This is the latest 2.0.0 version, this version with the previous 1.x.x the biggest difference is no longer support IE6, 7 and 8, I personally very much agree with this approach, Microsoft's legacy browser has become a stumbling block in the development of web technology, and this time we use a Chrome browser, Decisive choice of the latest version.

There is also a server side, in order to simplify the problem, this time I used PHP code, a PHP file is the entire processing, not too many complex configuration, concise, this is the biggest advantage of PHP. System structure

Crawl the content of the web to rely on content_script.js, and then through sendmessage/ OnMessage and Background.js Exchange data, Background.js sends the URL information via Ajax (XMLHttpRequest) to localhost, gets the time of the first visit to this page, and finally, the user dot small icon, popup.html appears, p Opup.html reads the articledata data in the Background.js (code in Popup.js) and displays it. This is the whole process.

The way I crawl Web data does not ensure that all the blog park articles can be normal access, which is related to the user's blog template, but I try to come down most of the articles can be crawled, I do not adapt to all the template, after all, this is only a demonstration demo.

Another thing to note is that I use jquery to do xmlhttprequest,post content is not the traditional form of HTML forms, but JSON data, so on the server side, it can not be directly used $_request, but by reading "php:// The content of input "is obtained. By the way, a personal view of the Web API: "Unification" is more than "flexible", this is my point of view, I am sure that my interface format is JSON, using UTF-8 encoding, so it has been used, the caller does not have to consider XML or HTML form or other, developers do not have to consider, Making this a unified convention can be a hassle in team assistance and later development.

Debugging

program development, it must involve debugging, remember I just started to do web development, ask some of the web development of a long time to do a friend, you are how to do JavaScript debugging, I found that most people unexpectedly answer: With alert a little try it-not not, is too primitive, too low efficiency, right? In fact, Chrome directly supports JavaScript debugging and has chrome, which is the equivalent of having a powerful JavaScript debugger.

The way Chrome opens developer Tools is <Ctrl>+<Shift>+<I> (Windows edition), roughly as follows:

This time we need to be concerned about the "Elements", "Sources" and "Console" the three tags. Elements is used to do DOM analysis, the function is a bit like firebug, help us to analyze the content of the page, and sources, we used to debug JavaScript, the console is our Log Output window, but also a debugging tool.

Debug Content Script

As I provide this example, you can see "content_script.js" under Sources "Copntent Scripts" and then set a breakpoint, when executed to the breakpoint, Chrome will hold, you can observe the above value,

Too cool, would you like a little alert?

Debug background

Because background and content script are not in the same running environment, the above method is not visible to background JavaScript. To debug background, you also need to open the plug-in page, which is "chrome://extensions". Point corresponding to the plug-in "generated background page.html", there is a debug window, the next operation is similar to the previous.

As you see the ID, "Aajnhhjiia ..." This long list of things, this is an ID automatically arranged by Chrome.

Debug Popup

Although the popup and background are in the same running environment, the popup code is not visible in the debug window of the background just now. Debugging The Popup also requires this:

And then...... It's almost like the front.

Some questions

Sometimes you may find that the debugger is not very good, at least I use it to feel like this, for example, you may find that breakpoints are not set, or breakpoints do not work, or you do not see your own JavaScript files. My method is in the plug-in page, the corresponding plug-in "enabled" This check box is removed, and then re-tick, and then click "Reload (ctrl+r)", usually to solve the problem. Of course, there are some very strange problems, still not good to reproduce, the overall solution is to re-load, really do not restart the browser, or clear the browser cache, and then try again.

I also encountered a very depressing problem when I was doing the plugin debugging, which is that my chrome used "and gharmonic and Oharmonic and AgHarmonicEnt ", aboutand GHarmonyoHarmonyAgHarmonicentis used for what, this, can go to Google, I believe most programmers will like it ... Can be because of the use of this thing, it is likely to cause the plug-in XMLHttpRequest work is not normal, and you may be thinking for half a day can not find the reason, well, temporarilyand GHarmonyoHarmonyAgHarmonicentDeactivate it and maybe even you need to restart my experience under chrome--.

Summarize

I still want to say that I think Google is a very generous company for our programmers, and this is the product of chrome. With chrome plugin technology, we can do a lot of useful things, through this article, I believe you already know how to develop a chrome plug-in, of course, the functionality of the chrome plugin is very powerful, I use only a small corner of the iceberg. To go deeper, of course, you need to make better use of Google and stackoverflow.com.

Chrome plugin (Extensions) Development strategy