So, I've been back and forth with this problem. What I want is to execute som piece of code (in a injected.js file) when a button is pressed on the website. I want to run code that I've written myself.
This should be do-able? I've looked it up, and this is taken from the developer docs:
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.
As can be seen in the example, also found on the same page (http://developer.chrome.com/extensions/content_scripts.html#execution-environment) I should be able to attach a click event to something and the execute code from the same .js file when that button is clicked? Right?
Anyway, here's the code I've written:
$sidebar = $('<div><div></div></div>')
.css('background', '#eee')
.css('width', '20%')
.css('position', 'fixed')
.css('right', '0px')
.css('top', '0px')
.css('height', '100%');
$form = $('<br/><center><div class="input-append">\
<input class="span2" id="add_cat_input" type="text">\
<button class="btn" type="button">Add category</button>\
</div>\
<div class="input-append"><select id="categories">\
<option>A</option>\
<option>B</option>\
<option>C</option>\
<option>D</option>\
<option>E</option>\
</select>\
<button class="btn" type="button">Edit</button><button class="btn" type="button">Delete</button>\
</div></center>');
$('body').prepend($sidebar);
$sidebar.append($form);
$(document).ready(function() {
console.log(document.getElementById("add_cat_input"));
document.getElementById("add_cat_input").addEventListener("click", function() {
console.log('hej');
}, false);
});
But nothing happends when I press 'Add category'.
Can anyone explain why? Am I doing it wrong?
The code above is from myscript.js. Here is my manifest.json
{
"name" : "πSpend",
"version" : "0.1",
"description" : "Creates a piechart of the spendings in your bankaccount.",
"permissions": [ "cookies", "tabs", "http://*/*", "contextMenus" ],
"icons": { "16": "cookie.png", "48": "cookie.png", "128": "cookie.png" },
"browser_action": {
"default_icon": "cookie.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"]
},
"manifest_version": 2,
"content_scripts": [
{
"matches": ["https://internetbanken.privat.nordea.se/*"],
"css": [ "bootstrap.min.css" ],
"js": ["jquery.js", "raphael-min.js", "g.raphael-min.js", "g.pie-min.js", "myscript.js"]
}
]
}
On the way I tried to use some form of message posting instead, but this line:
var port = chrome.extension.connect();
Gets me this error:
Port error: Could not establish connection. Receiving end does not exist.