Chrome extension javascript function is not defined

I'm Developing an chrome extension and encountered an problem i cannot solve ;/

I wrote the manifest file and some java script code. Everything is working good except buttons. When I click them they should fire the echo function with an parameter and send it further to a plugin developed in firebreath. When I inject code manually in a html file everything is working fine but when injecting the code through javascript chrome console gives me an message that echo function is not defined. I tried several ways to inject the code but none work.

So I ask for help or some good advice fellow programmists. (First post shy)

Main javascript file chrome_script.js

var Reg = /(\+48\s?[0-9]{3}[\-\ ]?[0-9]{3}[\-\ ]?[0-9]{3})|(\+48\s?[\(\ ]?[0-9]{2}[\)\ ]?[0-9]{2,3}[\-\ ]?[0-9]{2}[\-\ ]?[0-9]{2})/g

var content = document.body.innerHTML;

var phoneNumbers = content.match(Reg);

document.getElementsByTagName('head')[0].innerHTML +='<script src="'+chrome.extension.getURL("plug_fun.js")+'" type="text/javascript"></script>';

content = "<object id=\"plugin0\" type=\"application/x-testplugin\" width=\"100%\" height=\"300\"></object>" + content;

for (var i = 0; i < phoneNumbers.length; i++) {
    content = content.replace(phoneNumbers[i], "<button id=\"" + i + "\" type=\"button\" onclick=\"javascript:echo(" + phoneNumbers[i].replace(new RegExp("[\+\ ]", "g"),"") + ")\">" + phoneNumbers[i] + "</button>");
}

document.body.innerHTML = content;

javascript file plu开发者_StackOverflow中文版g_fun.js, for plugin and buttons

function plugin0(){
    return document.getElementById('plugin0');
}
plugin = plugin0;  
function echo(a){
    var num = String(a);
    plugin().echo(num);
}

manifest file manifest.json

{
    "name": "Phone Injection",
    "version": "0.2",
    "browser_action": {
        "default_icon": "Phone.ico"
    },
    "permissions": [
            "tabs", "http://*/*", "https://*/*", "file://*"
    ],
    "plugins": [
        { "path": "npTestPlugin.dll", "public": true }
        ],
    "content_scripts": [ {
        "matches": ["http://*/*", "https://*/*", "file://*"], 
        "js": ["chrome_script.js", "plug_fun.js"]
    }]
}

Error caught when clicking the button

Uncaught ReferenceError: echo is not defined

Content scripts in Chrome Extensions execute in something Google calls "isolated worlds". This means that the different scripts are not allowed to see or interact with each other and appear as if there is no other JavaScript executing on the page. See below for more info directly from the Google Documentation:

Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts. Quoted from: http://code.google.com/chrome/extensions/content_scripts.html#execution-environment

I would suggest trying to put the code that will interface with the firebreath plugin in a background script instead, although I would double check and make sure those don't also execute in isolated environments as well.

Try rearranging your manifest as follows;

"content_scripts": [ {
    "matches": ["http://*/*", "https://*/*", "file://*"], 
    "js": ["plug_fun.js", "chrome_script.js"]
}]

Now, in chrome_script.js you don't need to add the plug_fun.js file manually as the manifest has already loaded it for you in advance so hopefully you should now find that echo exists. However, I'm not 100% sure as I've never used such separation in my content scripts.

NPAPI plugins (including those developed in FireBreath) aren't always available and usable immediately after putting them in the page. I would first try putting a setTimeout in to delay trying to call plugin().echo() by about a second; if that doesn't work, your problem is something else. if it does work, then you can add an onload param tag with the name of a function that should be called when the plugin starts up. Note that NPAPI only allows passing strings in a param tag, so it needs to be the name of a global function.

See the FireBreath FBTestPlugin test.html for an example of using the onload param.