Home > Developer > Web Develop
Chrome plug-in development plug-in-acfun see Figure 1, chrome-acfun
I used to read articles in acfun. I often see images from other websites that I cannot see. This is not good. If you want to see these images, you can change the final jpg to jpeg after obtaining the image address. This simple operation should be very easy to implement, so I want to develop a simple small plug-in to help me read comments ....
First of all, let's first introduce the reasons for development. In acfun's comments, there are sometimes some pictures from other people. These pictures are sent from their own network disks or space, similar to Baidu, will be blocked.
The general solution is to get the image address, open it on the new page, change the last jpg suffix to jpeg, And then you can see the image.
After I clicked it many times, I was bored. Today, I decided to write a simple chrome plug-in for a pleasant look. Although the function is very simple, there are also many problems encountered when doing this, one by one.
This part describes in detail the chrome plug-in structure usage, as well as given a lot of use cases, tease than the 360 pirated chrome browser, and then also help translate the open documentation: http://open.chrome.360.cn/extension_dev/overview.html
The process of developing this program.
First, create a folder to store the project files.
For the chrome plug-in, there is a file similar to the main function, the file name is manifest. json. For the detailed format, see the document above 360. I will only write what I use here. For more information, see notes:
{"Name": "ACfun figure", // plug-in name "version": "1.0", // version "manifest_version": 2, // For the latest version of chrome browser, use this line to declare "description": "and no longer need to convert the image by yourself. ", // Description" browser_action ": {// browser operation, that is, the small icon displayed in the upper-right corner of the browser, and the event triggered after clicking it. "Default_icon": "icon16.png", // plug-in icon. After my detection, there should be a size limit. charts that exceed the size cannot be displayed, the default image is displayed. The size is 16x16. "Default_popup": "123.html" // here is the page loaded by clicking the icon button. Create a simple page in the folder and write only helloworld. }, "Background": {"scripts": ["menu. js"] // to use the thick menu, add a running js to the background. Menu. js here is the main thing I wrote. }, "Permissions": ["http: // */", "bookmarks", "tabs", "history", "contextMenus"], // This item indicates the permission of the plug-in. For all options, see the 360 documentation.
// Only one item is useful here. <span style = "font-family: Arial, Helvetica, sans-serif;"> "contextMenus" for right-click menus, the permission to generate the menu. </Span> "icons": {"16": "icon16.png", // various icons. "48": "icon_48.png", "128": "icon_128.png "}}
<!doctype html>
:
Can chrome plug-ins only be developed using javascript?You can use the NPAPI (I have never used it for implementation, but it can be done directly using js. The NPAPI can use dll, And the dll can be developed in multiple languages ):
It is very easy to develop new extensions using HTML and JavaScript. However, if you want to reuse the code and functions that have been developed in the extension, you can use the NPAPI plug-in to achieve your goal. The NPAPI plug-in allows JavaScript code to call local binary code.
NPAPI is a heavy weapon. It is recommended that you use it only when other methods cannot reach your goal.
It is dangerous to include an NPAPI plug-in your extension. Because the NPAPI plug-in has full access permissions to your local machine and is not controlled. If your plug-in is not robust enough and contains vulnerabilities, hackers can exploit this vulnerability to install malicious software on their machines. In this case, try to avoid using the NPAPI plug-in expansion.
If you only allow access to local files, try to declare "permissions" in the manifest. json file: ["file: // *"]
To support reading local files. After declaring the file, try to use AJax to obtain the local file.
Java should not work, because java must have a Java Virtual Machine
Recommended browser plug-in development booksThere seems to be no books on plug-ins, but there are many related articles on the Internet. Chrome plug-ins are simpler than FireFox.
Search for "Chrome plug-in", "Chrome plug-in development", and "Chrome extension development. In addition, these plug-ins are basically open-source. You can directly view the source code.
There are many JS books and a lot of online tutorials. You can refer to the w3school tutorials for the most basic ones.
John Resig has written a Pro JavaScript Techniques. The Chinese version of "proficient in JavaScript" published by Posts and Telecommunications is recommended.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
