Chrome扩展插件案例：单词查询
在页面内选中单词，右键菜单中显示词典连接，自动将选中单词发送至该词典查询
创建项目文件夹，在文件夹内创建一下文件
manifest.json:
{
"manifest_version":2,//版本号，由google指定的manifest格式版本为2
"name": "有道词典查询（第三方）",//插件名称
"version":"1.0",//插件版本
"description":"在网页内选中任意单词后，用鼠标右键菜单查询",//插件描述
"icons":{
"128":"img/icon.png",
"48":"img/icon.png",
"16":"img/icon.png"
},
"browser_action":{
"default_icon":"img/icon.png",
"default_popup":"popup.html"
},
"background":{
"scripts":["background.js"],//关联的代码
"persistent":true //在页面上一直运行
},
"permissions":[
"contextMenus"
]
}
popup.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有道词典查询</title>
</head>
<body>
<!--点击浏览器插件图标时会弹出的内容-->
<h1 style="color:red;width:200px;">有道词典查询</h1>
<p>在页面选中单词后，鼠标右键菜单中选择“有道词典查询”</p>
</body>
</html>
background.js
chrome.contextMenus.create({
id:"YoudaoDictionarySearch",
title: '有道英汉词典查询：%s', // %s表示选中的文字
contexts: ['selection'], // 只有选中页面内文字时才会出现此右键菜单
onclick: function(params) {
//创建新的标签页
chrome.tabs.create({url: 'https://www.youdao.com/result?lang=en&word=' + encodeURI(params.selectionText)});
}
});然后在Chrome浏览器中地址栏右边 -> 拓展程序 -> 管理拓展程序 -> 打开“开发者模式” -> 加载已解压的扩展程序 -> 大功告成！