简单的高亮文本 chrome 扩展

Posted

技术标签:

【中文标题】简单的高亮文本 chrome 扩展【英文标题】:Simple highlight text chrome extension 【发布时间】:2013-08-05 15:40:45 【问题描述】:

我正在尝试制作有史以来最简单的 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 大声朗读选定的文本,但希望文本也能被高亮显示,因此我尝试实现此功能)。

【问题讨论】:

【参考方案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");
);

如果您想在弹出窗口中选择一种颜色用于突出显示,那么您需要使用 message passing 在弹出脚本和内容脚本之间传递消息,或者传递到背景页面,然后内容脚本,如果您愿意。

我不会尝试在这里为您编写整个扩展程序,但希望这能让您抢先一步。

此外,如果您难以理解扩展程序,您可能会发现 my blog post here 会有所帮助。

【讨论】:

我尝试接近您的解决方案,但它并没有真正起作用。我怀疑这可能是因为如果弹出窗口还打开一个对话框,chrome.browserAction.onClicked.addListener 不起作用。我该如何解决这个问题? 别介意我之前的评论。我通过从 popup.js 中使用 getBackgroundPage 调用它来学习如何在 background.js 中执行一个函数。后台的功能只是向 content.js 发送消息的基本功能 - 在收到该消息后,content.js 执行突出显示功能。完美的。但是,既然您真的很有帮助,现在我必须要求您提供一个线程,以便在我取消选择它后使其取消突出显示。有没有办法以某种方式恢复原始文件,或者我是否需要编写一个新的 JS 函数并执行该函数?如何仅在取消选择时计时? 我在 content.js 中做了这个:function body() document.getElementsByTagName("body")[0].addEventListener( "click", function(event) highlight('white'); ); 问题是这行得通……有点奇怪。它仅在您专门单击选择时才有效,因为如果您在其外部单击,将没有选择,因此 highlight('white'); 函数不会更改任何内容。 我建议发布一个关于取消选择的单独问题,因为这确实是一个不同的问题,它可能比扩展相关的 JavaScript 更通用。

以上是关于简单的高亮文本 chrome 扩展的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Chrome 扩展程序中录制音频?

Chrome 扩展获取选定的文本

Chrome中实时查看.md文件

替换 Chrome 扩展中的用户文本输入

Chrome扩展程序,使内容脚本在所有页面上运行?

CodeMirror编辑器文本框Textarea代码高亮插件,CodeMirror的简单实用例子