图标弹窗（popup）
注册：
在清单文件的浏览器行为(browser_action)，添加默认弹窗(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"
}
}
编写
编写popup.html,就可以在弹窗的展示出来。 比如下面的HelloWorld入门程序
清单
{
"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())
})
})
注意文件存放的位置，不然可能识别不到。
选项页
注册
{
"name": "My extension",
...
"options_page": "options.html",
...
}
编写
编写好选项页，会在标签页中展示。
用法
选项页与其他脚本的通信是通过，Chrome的API，比如storage,runtime等，下面有一个预算计算器，展示了弹窗，选项页，以及后台脚本之间如何通过ChromeAPI进行交流。chromeAPI如何使用参考官方文档，一般来说存贮数据storage使用set,get方法，set,一个参数接受一个键值对，第二个参数是回调函数，get方第一个参数接受键，并传入一个回调函数。
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
);
});
示例
清单
{
"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})
})
})
上下文菜单
沙拉查词中有很多菜单，内容十分丰富。我们通过chromeAPI的contextMenus实现这种效果
注册:
{
"name": "My extension",
...
"permissions": [
"contextMenus"
],
"icons": {
"16": "icon-bitty.png",
"48": "icon-small.png",
"128": "icon-large.png"
},
...
}
请求权限后便可以使用这一API
用法
creat,update,remove,removeAll,他们接受的参数大体相同
上下文菜单显示有两个位置，页面和图标，下图是页面右击的菜单
上下文菜单要想在图标出显示，须在contexts属性设为broswe_action
实例：
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"})
})
页面弹窗
页面弹窗采用Js注入的方式，在chrome能访问网页dom的脚本只有content_script，以来这一特性，可以利用内容脚本向网页注入js
注册:
{
"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/*"
]
}
用法：
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()
})
效果: 点击关闭：
其他方式——后台注入：
利用后台脚本在标签页打开时也可以注入js脚本
chrome
.runtime
.onMessage
.addListener(
function(message
, callback
) {
if (message
== “changeColor”
){
chrome
.tabs
.executeScript({
code
: 'document.body.style.backgroundColor="orange"'
});
}
});
或者
chrome
.runtime
.onMessage
.addListener(
function(message
, callback
) {
if (message
== “runContentScript”
){
chrome
.tabs
.executeScript({
file
: 'contentScript.js'
});
}
});
下面这个沙拉查词的弹窗就做得很好看
其他：
WebStorm可以导入JS的chrome库，编写效率会大大提高：沙拉查词开源而且界面好看，基本涉及到了所有知识，值得我们去学习。 Github:https://github.com/crimx/ext-saladict
