Hi all
I am building a plugin for chrome and i need a little help.


What I'm Building:

I have made a plugin that uses a content script to detect certain web pages and then runs a javascript.


Problem:

Simple enough but i want this javascript to be changeable i.e the user clicks on a button in the pop up window and it changes, but i cant use functions inside the javascript because this javascript needs to be injected into the url bar and it for some reason it just doesn't work.


Here's the current source code:
now in attachment

With that source code i put a few different javascript in as they are what i want the user to be able to switch to. I would also like to know how to make an on off button work.


P.S thanks for all your input. But can somebody actually try it out in my source before posting, because so far i have had some good ideas but not a single way that actually works, this might just be me as i have no idea about web technology as i am studying object orientated languages like c++. But i really want to get this sorted so i can finish off this project.

For future reference, you can post small files like this as attachments to your post. See Manage Attachments in the Additional Options section below the Submit Reply button.
It will make more people willing to look at your code with the less work they have to do to see it.

Looking at it you match several image sites, and only include flip1.js
flip1.js is invalid JavaScript. Do not use javascript: at the beginning of a js file, that's only for URL injection.

When you include a JS file in the method of Content Scripts it's not immediately injected into the page, it runs in its own sandbox.
If you want the code of flip1.js to run in the sandbox of the page (therefore being able to access its javascript), you will have to do:
location.href = '';
Where the apostrophes surround what you currently have in the file (including the javascript: as this IS injection).

I'm not sure what you mean, you want the user to be able to switch what script is injected..? That's my assumption anyway. If that's the case, I'd say combine all the js files, set them to entries in an array or something, then throw up an options page where they can select what one they wanna use, save it to localStorage, and load that in your Content Script to choose what line you need to inject.

Yes, the DOM is somewhat shielded from the content script.

You can, however, use the chrome namespace to update the address bar, if you give your extension the "tabs" permission.

This might be a good place to start:
http://code.google.com/chrome/extensions/tabs.html

Good luck

The DOM isn't, just the page's JavaScript.
And I don't think you need the tab permission do you? Pretty sure that's just for JS execution from other parts of the extension, cause I'm pretty sure I've used location.href setting in a Content Script without it.

Hm, you might be right.

It was a couple of months since I worked out how my own content script should work...

But I distinctly remember not being able to remove existing event handlers in the DOM, only add new ones. I also tried to "reuse" certain pages in some circumstances, but I could only read from location.href.. not change it (so I gave up on that strategy).

In any case, going via the tabs object, changing the url should be easy.

crackruckles:
After re-reading your post, I realize I might have misunderstood your issue.

I don't think injecting javascript into the address bar is the proper way to call methods in your content script.

Is it not possible to do something like this?
content-script.js:

Code:

function init() { <do work> }
init();

Yeah that's the problem, I think he just copied bookmarklets into JS files thinking they'd work, and not understanding the differences in the systems of both.

PS Skymt: if you're talking about the tabs object then yeah you'd need perms, but you can't use that API from a Content Script. And no, you can't remove existing anonymous events from DOM objects, but you can't do that in any JavaScript. There is a proposed "attached events listing" function for HTML 5, but so far is unimplemented in Chrome. With listeners that are defined functions, you would have to inject the removal, but only because that function is not accessible from the Content Script's scope, being in the page's JS sandbox.

Well, it was the eventhandler declared in an attribute in the markup, and I tried to clear the attribute.
I never realized how deep the issue was..

I built a workaround so it doesn't really matter, but do you think the following approach would have done the trick?

element.removeEventListener('click', eval(element.onclick));

(It's getting OT, but this is interesting :P)

edit: It just occurred to me, is this inability to remove eventhandlers intentionally part of the w3c specification, or is it just something nobody really thought about when making it?

I think it was intentional, but then I think they realized how horrible of an idea it was not to add an extension only thing to circumvent it.
Also that would only remove an event handler that was declared on the element inline or by setting element.onclick directly, but I don't think you really need the eval. That depends on how element.onclick is stored from inline, even; ie. if it's a string or a reference to the function. I don't know which offhand.