[入門] Chrome Extension 入門 #6

2022-12-23

6
0
Chrome Extension
2024-11-23

本篇是 Chrome Extension 的第六篇入門文章。

在本文中將專門介紹 ChrExt 的前端剪貼簿解決方案。

和在一般網頁裡一樣, 在 ChrExt 裡同樣可以使用剪貼簿功能。在本文中介紹的情境是將當前網頁裡的資料擷取出來之後, 直接放到前端用戶的剪貼簿裡。例如, 假設網頁內容是一筆訂單的細目, 那麼我們可以擷出訂單內容 (例如「藍芽耳機」)、數量、單價和訂單編號後, 在各項資訊中夾入 TAB 字元, 再塞進剪貼簿裡, 然後就可以貼進 Excel 裡。這樣我們就不需要一項一項複製貼上了。特別是對於重複進行的人工作業, 這樣做可以省下大量的時間。

Function

我已經寫好主要的程式如下:

//程式一

function copyToClipboard(str='', mimeType='text', isDebugging=true) {
  document.oncopy = function(event) {
    event.clipboardData.setData(mimeType, str);
    event.preventDefault();
  };
  try{            
    let successful = document.execCommand('copy', false, null);
    let msg = successful ? 'successful' : 'unsuccessful';
    if (isDebugging)
      console.log('Copying object: ' + msg);
    if (!successful){
      navigator.clipboard.writeText(str).then(
        function() {
            if (isDebugging)
              console.log('Object copied into clipboard.')
        }, 
        function() {
            if (isDebugging)
              console.warn('Failed to copy.')
        }
      );
    }
  } catch(ex){ console.warn('Clipboard Exeption.\n'+ex )}
} // of copyToClipboard()

在本文描述的適用情境中, 以上程式直接拿去套用呼叫即可。

manifest.json

在上述程式中, 雖然並沒有用到 Chrome 的內建功能, 但是仍然必須在 manifest.json 進行宣告, 才能使存取剪貼簿:

"permissions": [
  "tts",
  "tabs",
  "storage",
  "clipboardRead",
  "clipboardWrite"
]

如上, 必須在 "permissions" 區段中加上 "clipboardRead" 和 "clipboardWrite" 兩個項目 (特別是後者), 程式一裡的 copyToClipboard() 函式才有作用。呼叫這個函式之後, 你的資料就會出現在剪貼簿裡了。

在任何情境下, 如果你需要清空剪貼簿, 呼叫 copyToClipboard() 但不代入任何參數即可。

參考：

Dev 2Share @ 點部落

回首頁

Dev 2Share

Dev 2Share @ 點部落