用于修改页面内容的 Chrome 扩展程序

Question

I am interested in creating a Chrome extension which can manipulate some of the content of specific webpages..

I want to replace something like this:

<td class="Data">Phone:</td>

with something like this:

<span title="Telephone number including area code."><td class="Data">Phone:</td></span>

The reason for this is to add hover-over or tool-tip text to certain parts of an existing website.

Is this possible with a Chrome extension? If so, how could this be done? Thank you.

Answer 1

You can do this with a Chrome extension, but even easier would be a bookmarklet.

Basically, the browser allows you to run javascript in the address bar in the form javascript://your valid javascript.

So write the script to achieve your desired results, minify it to a single line, then bookmark the results. It can then also be used in any browser.

I don't understand the exact use case, and your html is not valid, but you could do something similar pretty easily, this example assumes jquery is available:

javascript:$(function(){ $('td:contains("Phone")').attr('title', 'Telephone number including area code'); });

Note: the :contains() selector is case-sensitive