Chrome extension Replace a word in the current text box

Question

I am trying to make a chrome extension that replaces the last word typed in the current <textarea>one when the user makes some kind of fire keydown. So I tried this, but it really doesn't work.

Here are the files of my extension:

My extension 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
}

His background.js:

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

And him 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");
        }
    }
}

This works fine on JSFiddle ( http://jsfiddle.net/cyo646cr/3/ ), but I don't know how to do this in the Chrome extension.

Any ideas?

Thank.

Answer 1

Question

script. ,

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

background.js script ( tabId). script Google Chrome , .

chrome.tabs.executeScript.

, :

• "content_scripts" manifest.json, , .
• chrome.tabs.onUpdated.addListener script .

1

"content_scripts" manifest.json :

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

script ( "<all_urls>" ) . "content_scripts" .

2

API chrome.tabs URL-, manifest.json:

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

background.js chrome.tabs.onUpdated, (.. URL-) script chrome.tabs.executeScript, :

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

chrome.tabs.onUpdated.