Chrome plug-in development small plug-in-acfun see Figure 1

Source: Internet
Author: User

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 "}}

Simple HTML page:

<!doctype html>


:












Chrome plug-in development small plug-in-acfun see Figure 1

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.