簡單的高亮文本Chrome擴展

Question

我試圖做出最簡單的Chrome擴展有史以來，但唉，我有大問題，將不勝感激一些幫助。

這就是我想做的事情：

我選擇頁面上的一些文字，並按下擴展彈出。當我這樣做時，所選文字的背景顏色會變爲黃色。當我點擊其他地方（並且文本被取消選擇）時，背景顏色被移除。

我如何做到這一點？

我發現這個代碼在這裏：

function makeEditableAndHighlight(colour) { 
    var range, sel = window.getSelection(); 
    if (sel.rangeCount && sel.getRangeAt) { 
     range = sel.getRangeAt(0); 
    } 
    document.designMode = "on"; 
    if (range) { 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    } 
    // Use HiliteColor since some browsers apply BackColor to the whole block 
    if (!document.execCommand("HiliteColor", false, colour)) { 
     document.execCommand("BackColor", false, colour); 
    } 
    document.designMode = "off"; 
} 

function highlight(colour) { 
    var range, sel; 
    if (window.getSelection) { 
     // IE9 and non-IE 
     try { 
      if (!document.execCommand("BackColor", false, colour)) { 
       makeEditableAndHighlight(colour); 
      } 
     } catch (ex) { 
      makeEditableAndHighlight(colour) 
     } 
    } else if (document.selection && document.selection.createRange) { 
     // IE <= 8 case 
     range = document.selection.createRange(); 
     range.execCommand("BackColor", false, colour); 
    } 
} 

我真的不知道如何工作的background.js和popup.js和context_script.js。

我試着把這段代碼放在popup.js中，並用highlight('yellow')調用它，但它沒有起作用。我也嘗試將這段代碼放在background.js中，並使用chrome.extension.getBackgroundPage().highlight('yellow');從popup.js中調用它，但它不起作用。

在任何情況下，即使此代碼正常工作，它也會更改所選文本的背景顏色，但在取消選定文本時不會將其刪除。

在任何情況下，只要讓這第一點工作將是一個很大的幫助。

在其當前形式中，代碼的工作原理是這樣的：http://jsfiddle.net/LPnN2/12/ 問題是讓它與擴展一起工作。

這是我的manifest.json：

{ 
    "background": { 
     "scripts": [ "readit.js"] 
    }, 


    "description": "Reads out selected text", 
    "icons": { 
     "128": "icon128.png", 
     "16": "icon16.png", 
     "48": "icon48.png" 
    }, 
    "browser_action": { 
     "default_icon": "icon48.png", 
     "default_popup": "popup.html" 
    }, 

    "content_scripts": [ { 
    "js": [ "inject.js" ], 
    "matches": [ "\u003Call_urls\u003E", "https://*/*" ] 
    } ], 

    "manifest_version": 2, 
    "name": "Speak Me", 
    "options_page": "options.html", 
    "permissions": [ "contextMenus", "tabs", "notifications", "background" ], 
    "update_url": "http://clients2.google.com/service/update2/crx", 
    "version": "0.1" 
} 

我已經擴展做別的事情（使用TTS通過API來讀出聲來選定的文本，但會喜歡的文字也其突出顯示，因此我試圖實現這一點）。

Answer 1

內容腳本的目的是收集數據或使用CSS和/或JavaScript對正在瀏覽的頁面進行更改。所以，你需要做的就是把makeEditableAndHighlight（）和高光（）的內容腳本功能，並在清單文件中這樣加載它是什麼：

"content_scripts": [ 
    { 
     "matches" : [ 
      "<all_urls>" 
     ], 
     "js" : [ 
      "content.js" 
     ] 
    } 
], 

，那麼你只需要觸發亮點（ ）功能。有幾種方法可以做到這一點，但一種方法是簡單地在後臺頁面中調用「executeScript（）」。例如（我承認這是快速和骯髒的），把這個在您的內容腳本的頂部：

highlight('yellow'); 

然後在你的background.js文件運行內容腳本時，彈出按鈕cliked，這樣：

chrome.browserAction.onClicked.addListener(function() { 
    chrome.tabs.executeScript(null, {file: "content.js"}); 
}); 

如果你想選擇在彈出的顏色用於高亮那麼你就需要使用到message passing彈出腳本和內容腳本之間傳遞消息，或背景頁然後根據您的喜好選擇內容腳本。

我不會在這裏嘗試寫出整個擴展名，但希望這可以給你一個良好的開端。另外，如果您在擴展程序方面困難重重，那麼您可能會發現my blog post here會有所幫助。