Home > Developer > Web Develop
Recently, I used the hundred-byte splitting website to learn words. I felt very good, that is, when I reviewed the word list, I only had words and meanings, but no pronunciation. I felt very inconvenient. I thought about it and thought that the Chrome plug-in could do the job. So I did a little research.
The essence of Chrome plug-in is manifest. A web page composed of images, css, html, and js resources required by json files and plug-ins is only different from the traditional web pages, it is a web program running on the chrome browser.
The Chrome plug-in can interact with Web pages, or with the server through content script or cross-origin XMLHttpRequests. You can also access the internal functions provided by the browser, such as tags or bookmarks. It can also be displayed on the browser interface in the form of browser action or page action.
The Computer Manager plug-in shown in the toolbar uses browser action, and the T-icon at the end of the address bar (Announcement Terminator) page action and content script are used for injection into the page. Each plug-in can have up to one browser action or page action. When the plug-in icon is displayed depends on a single page, you should select page action. In other cases, you can select browser action.
The first image is the source image, and the second image uses the content script to change the page content. Content script can easily inject scripts to pages. In this way, personalized operations can be achieved.
The following is a simple manifest. json (the format of manifest. json must be UTF-8 ):
{"Name": "My first Chrome plug-in", "version": "1.0.0", "manifest_version": 2, "icons": {"48 ": "logo_avatar.png "}}
Is it easy. Of course, it does not have any function at the moment. If you want to develop it, you need to know more. Click here.
A simple example is provided:
Manifest. json File
{"Name": "My first Chrome plug-in", "version": "1.0.1", "manifest_version": 2, "description ": "My first Chrome plug-in", "icons": {"48": "logo_avatar.png"}, "browser_action": {"default_icon": "icon.png", "default_popup ": "popup.html "}}Popup.html
<!doctype html>
Popup. js// Copyright (c) 2012 The Chromium Authors. All rights reserved.// Use of this source code is governed by a BSD-style license that can be// found in the LICENSE file./** * Global variable containing the query we'd like to pass to Flickr. In this * case, kittens! * * @type {string} */var QUERY = 'kittens';var kittenGenerator = { /** * Flickr URL that will give us lots and lots of whatever we're looking for. * * See http://www.flickr.com/services/api/flickr.photos.search.html for * details about the construction of this URL. * * @type {string} * @private */ searchOnFlickr_: 'https://secure.flickr.com/services/rest/?' + 'method=flickr.photos.search&' + 'api_key=90485e931f687a9b9c2a66bf58a3861a&' + 'text=' + encodeURIComponent(QUERY) + '&' + 'safe_search=1&' + 'content_type=1&' + 'sort=interestingness-desc&' + 'per_page=20', /** * Sends an XHR GET request to grab photos of lots and lots of kittens. The * XHR's 'onload' event is hooks up to the 'showPhotos_' method. * * @public */ requestKittens: function() { var req = new XMLHttpRequest(); req.open("GET", this.searchOnFlickr_, true); req.onload = this.showPhotos_.bind(this); req.send(null); }, /** * Handle the 'onload' event of our kitten XHR request, generated in * 'requestKittens', by generating 'img' elements, and stuffing them into * the document for display. * * @param {ProgressEvent} e The XHR ProgressEvent. * @private */ showPhotos_: function (e) { var kittens = e.target.responseXML.querySelectorAll('photo'); for (var i = 0; i < kittens.length; i++) { var img = document.createElement('img'); img.src = this.constructKittenURL_(kittens[i]); img.setAttribute('alt', kittens[i].getAttribute('title')); document.body.appendChild(img); } }, /** * Given a photo, construct a URL using the method outlined at * http://www.flickr.com/services/api/misc.urlKittenl * * @param {DOMElement} A kitten. * @return {string} The kitten's URL. * @private */ constructKittenURL_: function (photo) { return "http://farm" + photo.getAttribute("farm") + ".static.flickr.com/" + photo.getAttribute("server") + "/" + photo.getAttribute("id") + "_" + photo.getAttribute("secret") + "_s.jpg"; }};// Run our kitten generation script as soon as the document's DOM is ready.document.addEventListener('DOMContentLoaded', function () { kittenGenerator.requestKittens();});
Image:
48 × 48:, 20 × 20:
Put it in the same directory and load it in the extension page. An icon will be added in the toolbar. Click it to display the effect:
Download demo: Click here to download the demo.
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
