Recently, I saw that the next group developed and wrote a Chrome extension to improve the efficiency of Agile Planning, and I wanted to fiddle with it. Then go online to Baidu (it's really a bit low) to study some information on what a Chrome extension is~
The main reference material comes from the open source e-book of the Turing community: "Chrome Extension and Application Development" . Thanks to the author Sneezry and the Turing community for their work. For other information, it is recommended to directly refer to Google's official documents: https://developer.chrome.com/extensions/getstarted Of course, Google's things still need to bring their own ladders. It is inconvenient to use the ladders to read the book above to get started. enough.
Chrome extensions and apps are simply a collection of files, including HTML, CSS, JavaScript, images, and manifest.json. They are all developed using front-end technology. Students who are familiar with the front-end should be able to do it easily after figuring out the basic structure and API. For a beginner like me, I can take this opportunity to learn front-end knowledge with practice.
Extensions and applications are very similar in that they share many property definitions. Extensions can only run inside Chrome, you need to run Chrome before running the extension. Applications can directly call the Blink kernel to work independently.
Among the series of files that make up an extension or application, manifest.json is a must and must be named by this name. This file is the entry for Chrome to read extensions/applications, and the browser renders extensions based on this file. The content of the file is the related information of the extension/application described in a certain format, such as extension name, version, update address, requested permission, extension UI interface entry, and so on. It can be seen from the "extension" of the file that the file uses the json format to save the information. Please Baidu ~ (very simple) about the syntax of the json format.
Most of the attributes in the manifest are shared by extensions and applications, and individual attributes can only be applied to one of them, and cannot appear in the same manifest file at the same time.
The manifest of the Chrome extension must contain: name, version, manifest_version
The manifest for a Chrome app must contain: name, version, manifest_version, app
where the value of the manifest_version attribute can now only be 2
Other common optional properties are: browser_action, page_action, background, permission, options_page, content_scripts.
At this point, you can actually start writing a very simple extension to practice your hands (the example comes from the book above).
The goal is to complete an extension that, when clicked, displays the current time.
First is the manifest.json file
{
"manifest_version": 2,
"name": "My Clock",
"version": "0.0.1.0",
"description": "First Chrome Extension",
"browser_action":{
"default_title": "My Clcok",
"default_popup": "popup.html"
}
}
In the above file, we can see that the name attribute defines the name of the extension. The description property We can write some description of the extension by ourselves. The version attribute defines the current version of the extension, which can consist of up to three separate four-segment numbers, each of which does not exceed 65535 and cannot start with 0, but can be 0. If the extension is subsequently updated, the new version The number must be higher than the old version number, and the comparison order is segmented from left to right. All three of the above information will be displayed on Chrome's extension management page after the extension is installed.
The browser_action attribute specifies the behavior of the extension in the browser. default_title is the text information displayed when the mouse hovers over the extension icon, and default_popup is an html file address, which is the location of the page file displayed after the specified extension is clicked.
After understanding what each is in the manifest, it is natural to start writing that popup.html
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
width: 200px;
height: 100px;
}
div {
line-height: 100px;
font-size: 42px;
font: Ariel;
text-align: center;
}
</style>
</head>
<body>
<div id="clock_div"></div>
<script src="./my_clock.js"></script>
</body>
</html>
Since what we display is not a complete HTML page, many standard tags are omitted. Of course, it is no problem to write it, but it is useless. It is also worth noting that an external js file is referenced through the script tag. This is because Chrome does not allow direct embedding of JavaScript code in HTML, and inline-script is also prohibited. Therefore, external js files are introduced to implement events and the binding of elements and events.
so... Next, you need to implement that my_clock.js
function my_clock(el){
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = m>10?m:('0'+m);
s = s>10?s:('0'+s);
el.innerHTML = h +":"+m+":"+s;
setTimeout(function(){my_clock(el)},1000);
}
var clock_div = document.getElementById('clock_div');
my_clock(clock_div);
Dangdang~~Dang~ This is a simple extension that displays the time. Load it into Chrome to see the effect~ (How to load it? Hey, guess ~~or Baidu?)