如何在 Chrome 擴充套件中使用 clipboard.js 複製文字
阿新 • • 發佈：2020-08-25
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) 函式。
這樣，點選“測試按鈕”之後文字即可被複制到剪下板。