一个简单的 chrome 插件 -- 二维码生成器
千里之行始于足下，今天写了一个相当简单的 chrome 插件，熟悉一下 chrome 插件的开发流程。
chrome 插件必备一个配置文件，名称为『manifest.json』，所以你可以先新建一个json文件了，其内容很清晰：
{
"manifest_version": 2, //这里必须是2, 由官方规定的
"name": "QRcode tool", //插件名称
"version": "1.0", //插件版本
"description": "二维码生成工具", //插件描述
"icons": { //插件图标(在插件中心显示)
"16": "images/icon16.png",
"48": "images/icon128.png",
"128": "images/icon128.png"
},
"options_page": "options.html", //配置项页面
"browser_action": { //插件配置
"default_popup": "qrcode.html",
"default_titlec": "QRcode tool",
"default_icon": { //插件栏的小图标
"16": "images/icon16.png"
}
},
"permissions":["tabs"] //需要的权限，本插件只需要'tabs'权限
}
详细的介绍放在了文章最后面，不看也没关系。
配置文件介绍完了，接下来就是实现的部分。
qrcode.html 中 DOM 只有两个部分：一部分是 input 输入框，输入框的'value'会被生成一个二维码，另一部分就是一个 div 元素，用于存放生成的二维码。这些 DOM 将会在你点击 chrome 插件图标的时候弹出来。
就像下图一样，因为没有设置图标（全注释掉了），所以插件栏处就显示了一个默认的图标（一个 Q ？？？）。
<!DOCTYPE>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<script type="text/javascript" src="myqrcode.js"></script>
</head>
<body>
<input id="text" type="text" value="http://sf.gg" placeholder="在此输入url" style="width:80%" /><br />
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
</body>
</html>
本例子中，生成二维码使用了 qrcode.js 这个库，所以需要引入一下。
myqrcode.js 本js文件使用了 chrome 的chrome.tabs.query api 来获取当前标签的 url ,一个值得注意的是问题是：chrome.tabs.query 返回的是数组，要想获得当前页面的 url 需要使用 tabs[0].url 而不是 tabs.url。
$(document).ready(function(){
let currentUrl;
chrome.tabs.query({
active: true,
currentWindow: true
}, (tabs) => {
currentUrl = tabs[0].url;
console.log(currentUrl);
$('#text').val(currentUrl);
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,
height : 100
});
function makeCode () {
var inputUrl = document.getElementById("text");
qrcode.makeCode(inputUrl.value);
}
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
});
});
把需要的文件都放在文件夹中，然后把整个文件夹拖拽到 chrome://extensions/ 这个窗口里，就可以了。
所有的代码已经在文章内写出来的，如果需要的话， Github地址点此。
附录
以下是 manifest.json 文件的具体解释：
manifest_version
manifest_version：插件配置文件 manifest.json 的版本号，是由 chrome 官方发布的。
name
name：插件的名称
description
description：对插件的描述。定义了之后，打开chrome://extensions/，在插件名称的底部可以看到。
version
version：插件的版本
icons
icons：打开扩展程序界面 chrome://extensions/，你会在每个插件的左侧看到对应的图标，这个也就在 manifest.json 定义的 icons 。一般而言，一个插件应用都有一套对应的图标，分别是四种大小的格式（16px, 32px, 48px, 128px）。在不同的分辨率下，chrome会根据不同情况采用不同大小的图标。
值得注意的是，这个属性不是必须的。倘若你未指定 icons，则 chrome 会采用默认的“拼图”图标。
browser_action
browser_action：一般包含 “default_icon”、”default_title” 以及 “default_popup”
- default_popup
看到带popup字样，我们便能联想到这是关于弹出层的信息。default_popup指定了鼠标点击工具栏右侧插件图标时显示的弹出层，它是一个 html 页面（popup.html）,主要用于展示插件内容。我们也可以通过 setPopup 这个 API 来改变popup展示的内容：
- default_title
指定了鼠标悬停到工具栏右侧插件图标时显示的文字信息，很像普通页面的