在 Chrome 扩展中使用 clipboard.js 复制文本
clipboard.js 是一个用于实现复制功能的 js 脚本。
下面介绍如何在 Chrome 扩展中使用它实现文本复制。
下载
首先要下载 clipboard.js，你可以到 zenorocha / clipboard.js 或 clipboard.js 官网下载。
假设我们已经下载好了。
下面的示例插件将演示如何在插件中使用它。
demo
下面是示例插件的文件目录：
 |
其中 clipboard.js 就是我们上面下载的文件。
下面是其他各文件的源代码：
background.html
<!--background.html-->
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<body>
<textarea id='formatted_text'></textarea>
<button class="btn" id="btn_copy" data-clipboard-target="#formatted_text">copy</button>
</body>
<script type="text/javascript" src="background.js"></script>
<script type="text/javascript" src="clipboard.js"></script>
</html>
其中的
<textarea id='formatted_text'></textarea>
<button class="btn" id="btn_copy" data-clipboard-target="#formatted_text">copy</button>
是方便用 clipboard.js 实现复制而编写的元素。
background.js
//background.js
//复制内容
function copy(text) {
var inputText = document.getElementById("formatted_text");
var copyBtn = document.getElementById("btn_copy");
var clipboard = new Clipboard('.btn');
clipboard.on('success', function (e) {
alert("复制成功")
});
clipboard.on('error', function (e) {
alert("复制出错")
});
inputText.innerHTML = text;
copyBtn.click();
}
copy(text) 函数可接收字符串并复制它。
manifest.json
{
"manifest_version": 2,
"name": "test",
"version": "1.0.0",
"description": "测试",
"background": {
"page": "background.html"
},
"browser_action":
{
"default_title": "测试",
"default_popup": "popup.html"
}
}
这是配置文件，就不多说了。
popup.html
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<body>
<button id="test">点击测试</button>
</body>
<script type="text/javascript" src="popup.js"></script>
</html>
在 popup 页面中写一个按钮，到时候我们点击按钮进行测试。
popup.js
window.onload=function(){
var bg = chrome.extension.getBackgroundPage();
document.getElementById("test").addEventListener('click', function(){
bg.copy("这句话将会被复制。")
}, false);
}
popup.js 给按钮绑定点击事件，实现点击之后传入字符串调用 background.js 中的 copy(text) 函数。
这样，点击“测试按钮”之后文本即可被复制到剪切板。
