Icon popup
registered:
In the browser action of the manifest file (browser_action), add a default popup (default_popup)
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": {
"128": "icon_16.png",
"128": "icon_32.png",
"128": "icon_48.png",
"128": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background_script.js"]
},
"permissions": ["https://*.google.com/", "activeTab"],
"browser_action": {
"default_icon": "icon_16.png",
"default_popup": "popup.html"
}
}
write
Write popup.html and it can be displayed in the pop-up window.
For example, the following HelloWorld entry program
- Checklist
{
"name": "HelloWorld",
"version": "1.0.0",
"manifest_version": 2,
"description": "This a extension with a UI of HelloWorld",
"icons":
{
"128": "image/image128.png",
"48": "image/image48.png",
"16": "image/image16.png"
},
"browser_action":
{
"default_icon": "image/image16.png",
"default_popup": "popup.html"
}
}
- popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
<script src="jquery-3.5.1.min.js">
</script>
<script src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id="greet">Hello World!</h1>
<input type="text" id="name">
</body>
</html>
- popup.js
$(function (){
$('#name').keyup(function () {
$('#greet').text('Hello '+$('#name').val())
})
})
Pay attention to the location where the file is stored, otherwise it may not be recognized.
Options page
registered
{
"name": "My extension",
...
"options_page": "options.html",
...
}
write
The option page is written and it will be displayed in the tab page.
usage
The option page communicates with other scripts through Chrome APIs, such as storage, runtime, etc. There is a budget calculator below, which shows how to communicate through the Chrome API between pop-up windows, option pages, and background scripts. How to use chromeAPI refers to the official documentation . Generally speaking, storage uses set, get methods, set, one parameter accepts a key-value pair, the second parameter is a callback function, and the first parameter of the get party accepts the key and passes it in. A callback function.
chrome.storage.sync.set({
key: value}, function() {
console.log('Value is set to ' + value);
});
chrome.storage.sync.get(['key'], function(result) {
console.log('Value currently is ' + result.key);
});
Example
- Checklist
{
"manifest_version": 2,
"version": "1.0",
"name":"Budget Manager",
"description": "This is a extension that helps you manager bill",
"icons": {
"128": "image/image128.png",
"48": "image/image48.png",
"16": "image/image16.png"
},
"browser_action": {
"default_icons": "image/image/16",
"default_popup": "popup.html"
},
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
"options_page": "option.html",
"permissions": [
"storage",
"notifications",
"contextMenus"
]
}
- popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Budget Manager</title>
<script src="jquery-3.5.1.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
<h1>Budget Manager</h1>
<h2>Total Spend:<span id="total">0</span></h2>
<h2>limit:<span id="limit"></span></h2>
<h3>Enter Amount:</h3>
<input type="text" id="amount"/>
<input type="submit"id="spendAmount" value="Spend">
</body>
</html>
- popup.js
$(function (){
chrome.storage.sync.get(['total','limit'],function (budget){
$('#total').text(budget.total)
$('#limit').text(budget.limit)
})
$('#spendAmount').click(function () {
chrome.storage.sync.get(['total','limit'],function (budget){
let newTotal=0;
if(budget.total){
newTotal+=parseInt(budget.total)
}
let amount = $('#amount').val();
if(amount){
newTotal+=parseInt(amount)
}
chrome.storage.sync.set({
'total':newTotal},function () {
if(amount>=budget.limit && newTotal >=budget.limit){
let notifOptions={
type:'basic',
iconUrl:'image/image48.png',
title:'Out of limit',
message:"Please Reset the total or limit"
};
chrome.notifications.create('LimitNotification',notifOptions)
}
});
$('#total').text(newTotal)
$('#amount').val('')
})
})
})
- option.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Budget Manager Options</title>
<script src="jquery-3.5.1.min.js"></script>
<script src="option.js"></script>
</head>
<body>
<h1>Budget Manager Options</h1>
<h2>Limit:<input type="text" id="limit"></h2>
<input type="submit" id="saveLimit" value="Save Limit">
<input type="submit" id="resetTotal" value="Reset Total">
</body>
</html>
- option.js
$(function () {
chrome.storage.sync.get('limit',function (budget) {
$('#limit').val(budget.limit)
})
$('#saveLimit').click(function () {
let limit=$('#limit').val()
chrome.storage.sync.set({
'limit':limit},function () {
close()
})
})
$('#resetTotal').click(function () {
chrome.storage.sync.set({
'total':0})
})
})
Context menu
There are many menus in the salad search, which are very rich in content. We achieve this effect through contextMenus of chromeAPI
registered:
{
"name": "My extension",
...
"permissions": [
"contextMenus"
],
"icons": {
"16": "icon-bitty.png",
"48": "icon-small.png",
"128": "icon-large.png"
},
...
}
You can use this API after requesting permission
usage
creat, update, remove, removeAll, the parameters they accept are roughly the same
The context menu is displayed in two places, the page and the icon. The following figure is the menu of the right-click on the page
To display the context menu on the icon, the contexts attribute must be set to broswe_action
Examples:
chrome.contextMenus.create({
id:"wordbook",
contexts:["browser_action"],
title:"生词本"
})
chrome.contextMenus.onClicked.addListener(function (clickData) {
if(clickData.menuItemId=="wordbook"){
chrome.tabs.create({
url:"wordbook.html"})
})
Page popup
The page pop-up window uses the Js injection method. The only script that can access the web page dom in chrome is content_script. Since this feature, the content script can be used to inject js into the web page.
registered:
{
"manifest_version": 2,
"name": "Killer",
"version": "1.0",
"description": "This a extension that handles SB_ZHI_HU",
"icons": {
"128": "image/image128.png",
"48": "image/image48.png",
"16": "image/image16.png"
},
"content_scripts":[
{
"matches": ["https://www.zhihu.com/*","http://223.2.10.172/*"],
"js": ["jquery-3.5.1.min.js","content.js"]
}
],
"permissions": [
"https://www.zhihu.com/*",
"http://223.2.10.172/*"
]
}
usage:
let popContent=" <div class=\"pop\" style=\"width: 100px;height: 100px\">\n" +
" <style type=\"text/css\">\n" +
" .pop{\n" +
" position: absolute;\n" +
" left: 20px;\n" +
" top:60px;\n" +
" background-color:rgba(0,0,0,0);\n" +
" border: solid 2px;\n" +
" }\n" +
" </style>\n" +
" <button id=\"close\">关闭</button>\n" +
"</div>"
$("body").append(popContent)
$("#close").on("click",function () {
$("div.pop").remove()
})
Effect:
Click to close:
Other ways-background injection:
Use background scripts to inject js scripts when the tab is opened
chrome.runtime.onMessage.addListener(
function(message, callback) {
if (message == “changeColor”){
chrome.tabs.executeScript({
code: 'document.body.style.backgroundColor="orange"'
});
}
});
or
chrome.runtime.onMessage.addListener(
function(message, callback) {
if (message == “runContentScript”){
chrome.tabs.executeScript({
file: 'contentScript.js'
});
}
});
The following pop-up window of the salad word search is done very well
other:
- WebStorm can import the chrome library of JS, and the writing efficiency will be greatly improved:
- Salad search word is open source and the interface is good-looking, basically involves all the knowledge, it is worth learning.
Github: https://github.com/crimx/ext-saladict