Chrome扩展程序替换当前textarea中的单词

时间:2014-10-13 08:16:01

标签: javascript jquery html google-chrome google-chrome-extension

当我尝试触发某个<textarea>事件时,我正在尝试制作一个chrome扩展名,以替换当前keydown中输入的最后一个单词。所以我试过这个,但它确实不起作用。

以下是我的扩展程序的文件:

我的扩展程序manifest.json

{
  "name": "Test",
  "description": "test",
  "version": "0.0.1",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
 "browser_action": {
    "default_title": "replace test"
  },
  "manifest_version": 2
}

background.js

chrome.tabs.executeScript(null, {file: "content_script.js"});

及其content_script.js

    document.onkeydown = replacePrevWord;  

// Azerty: Ctrl + ² 
// Qwerty: Ctrl + '
function KeyPress(e) {
    var evtobj = window.event? event : e
    if (evtobj.keyCode == 222 && evtobj.ctrlKey)
        return true;
}


function getCaretPosition(ctrl) {
    var CaretPos = 0;   // IE Support
    if (document.selection) {
        ctrl.focus();
        var Sel = document.selection.createRange();
        Sel.moveStart('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0')
        CaretPos = ctrl.selectionStart;
        return (CaretPos);
}


function returnWord(text, caretPos) {
    var index = text.indexOf(caretPos);
    var preText = text.substring(0, caretPos);
    if (preText.indexOf(" ") > 0) {
        var words = preText.split(" ");
        return words[words.length - 1]; //return last word
    }
    else {
        return preText;
    }
}


function replacePrevWord() {
    if(KeyPress()){
        var text = document.activeElement;
        var caretPos = getCaretPosition(text)
        var word = returnWord(text.value, caretPos);
        if (word != null) {
            text.value =  text.value.replace(word,"replaced");
        }
    }
}

这适用于JSFiddle( http://jsfiddle.net/cyo646cr/3/ ),但我不知道如何在Chrome扩展程序中执行此操作。

有什么想法吗?

感谢。

1 个答案:

答案 0 :(得分:3)

问题

您没有正确注入脚本。这很容易说,因为调用这个简单的行

chrome.tabs.executeScript(null, {file: "content_script.js"});
background.js中的

将导致仅在一次和当前标签中注入脚本(因为未指定tabId)。因此,您的脚本只会在您打开的第一个标签中为每个Google Chrome会话运行一次

看看the documentation for chrome.tabs.executeScript

解决

要解决此问题,您有两个选择:

  1. "content_scripts"中声明manifest.json字段,以便将其插入与模式匹配的任何页面中。
  2. 使用chrome.tabs.onUpdated.addListener方法添加侦听器,并在选项卡上注入脚本。
  3. 选项1

    "content_scripts"中声明manifest.json字段,如下所示:

    ...
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content_script.js"],
            "run_at": "document_idle",
            "all_frames": true
        }
    ],
    ...
    

    现在,您的内容脚本将被注入每个页面(因为"<all_urls>"将匹配所有页面)和页面的所有帧。您可以找到有关"content_scripts" here

    的有用信息

    选项2

    chrome.tabs中请求manifest.json API和所需网址的权限:

    ...
    "permissions": [
        "activeTab",
        "tabs",
        "<all_urls>"
    ]
    ...
    

    background.js中,向chrome.tabs.onUpdated添加一个监听器,该监听器将在每个标签更新(即网址更新)上触发,并使用chrome.tabs.executeScript注入您的脚本,如下所示:

    chrome.tabs.onUpdated.addListener(function(tabID, info, tab) {
        chrome.tabs.executeScript(tabID, {file: "content_script.js"});
    });
    

    请参阅the documentation for chrome.tabs.onUpdated