iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
0
Modern Web

弄點簡單的 Chrome Extension 讓生活更方便系列 第 11

Chrome Extension 11 - 增加右鍵複製網址功能

  • 分享至 

  • xImage
  •  

直接右鍵增加一個複製網址按鈕,增加複製網址的速度

manifest.json 部分 :

{
    "manifest_version" : 2, 
    "name" : "RightClickCopyUrl", 
    "version" : "1.0",
    "description" : "Right Click Copy Url",
    "icons":{ 
        "128" : "icon128.png",
        "48"  : "icon48.png",
        "16"  : "icon16.png"
    },
    "background" :{
        "scripts" :["eventPage.js"],
        "persistent" : false
    },

    "permissions" : [
        "storage",
        "notifications",
        "contextMenus"
    ]
}

eventPage.js

var contextMenuItem = {
    "id" : "rightclickcopyurl",
    "title" : "Copy Url",
    "contexts" : ["page"]
};

chrome.contextMenus.create(contextMenuItem);

chrome.contextMenus.onClicked.addListener(function(clickData){
    if(clickData.menuItemId=="rightclickcopyurl"){
        copyToClipboard(clickData.pageUrl);
        
            var notifOptions = {
                type : 'basic',
                iconUrl : 'icon48.png',
                title : 'Copy Url',
                message : "Copy Success! " + clickData.pageUrl
            }
            chrome.notifications.create('limitNotif',notifOptions);
    }
});
//https://stackoverflow.com/questions/33855641/copy-output-of-a-javascript-variable-to-the-clipboard
function copyToClipboard(text){
    var dummy = document.createElement("input");
    document.body.appendChild(dummy);
    dummy.setAttribute('value', text);
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

當你使用右鍵可以多一個 Copy Url 功能
https://ithelp.ithome.com.tw/upload/images/20181026/200942239skJdpi1zq.png

按下後會彈跳一個視窗,顯示複製網址,並放到剪貼簿
https://ithelp.ithome.com.tw/upload/images/20181026/20094223G0ixl1FDj6.png

創建選單似乎還有點問題,不過可以順利複製網址。

感謝收看 :)


上一篇
Chrome Extension 10 – 取得UV資料 Part 2 ..改使用 jsonp 取資料
下一篇
Chrome Extension 12 - 增加下載 Youtube 按鈕
系列文
弄點簡單的 Chrome Extension 讓生活更方便30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言