如何在浏览网页时更改内容？ [关闭]

Question

I want to write a program to change the content when browsing a web page, and suppose to add the following feature:

1) to highlight some keywords

2) change the background of the keywords

3) when mouse move on it, will give a message bubble

I have some ideas, but I am not sure which one will work:

1. write an addon for firefox
2. write an extension for chrome
3. write a proxy using php to change the content of the web page being proxy-ed.
4. inject javascript to the web page
5. other solutions ... ?

which one can solve the problem ? and which one is the best?

Thanks in advance.

Answer 1

It is 1+4 or 2+4 (or 1+2+4), you'll have to write a script that will be injected to the pages and it can be used as a Firefox Greasemonkey script or a Chorme extension.

Unlike in Firefox where you need Greasemonkey to make scripts work, a simple script file can be used directly as a Chrome extension by dragging it to the extensions window. With some more official documentation on how to organise an extension you can make it a complete Chrome extension.

A sample script that will inject script only when you are on stackoverflow:

script.user.js

if(document.URL.indexOf("http://stackoverflow.com")!=-1) {
    var d = document.createElement("div");
    d.innerHTML = "Hello World! This is my first injected script";
    d.className = "red"; // supposing it's defined, wouldn't hurt anyways
    // otherwise
    d.style.color = "#f00";
    document.body.appendChild(d);
}

Save your file and drag it to the "extentions" window on Chrome, then reload stackoverflow.