简单的高亮文本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 highlight('yellow')调用它，但是没有用。 我还尝试将这段代码放在background.js中，并使用chrome.extension.getBackgroundPage().highlight('yellow');从popup.js调用它chrome.extension.getBackgroundPage().highlight('yellow'); 但这没用。

无论如何，即使此代码有效，它也只会更改所选文本的背景颜色，而在取消选择文本时不会将其删除。

无论如何，仅使第一手工作将是一个很大的帮助。

在当前形式下，代码的工作方式如下： 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（）和Highlight（）函数放入内容脚本中，并将其加载到清单文件中，如下所示：

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

因此，您只需要触发highlight（）函数即可。 有几种方法可以做到这一点，但是一种方法就是简单地在后台页面中调用“ executeScript（）”。 例如（我承认这是快速又肮脏的），请将其放在内容脚本的顶部：

highlight('yellow');

然后，当单击弹出按钮时，在background.js文件中运行内容脚本，如下所示：

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

如果您想在弹出窗口中选择一种颜色用于突出显示，则需要使用消息传递在弹出脚本和内容脚本之间传递消息，或者在背景页面和内容脚本之间传递消息（如果您要喜欢。

我不会在这里为您编写整个扩展程序，但希望可以为您提供一个良好的开端。

另外，如果您在扩展时遇到麻烦，您可能会发现我的博客文章对您有所帮助。