Reputation: 59
I want to modify the content of a site with an extension, there are <ul>
and <il>
tags, (inside a <div>
) and I want to add another <il>
element inside the <ul>
. Any idea?
Upvotes: 1
Views: 226
Reputation: 13585
You can inject JS into a site with a Chrome extension. Using, for example, jQuery, you could do something along the lines of:
$("div > ul").append("<li>This is a new list element.</li>");
Which will append the "new list element" to the ul
element.
Updated 2013.02.06:
Taken from the Chrome extensions documentation. The manifest file would contain something along the lines of the following (where "..." indicates an omission):
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.the-site-your-targeting.com/*"],
"js": ["jquery.js", "myscript.js"]
}
],
...
}
And myscript.js
would contain something along the lines of:
(function () {
// $("#theIdOfTheElement").append("<li>Foo bar baz</li>");
// OR
// $(".aSpecificClassName").append("<li>Foo bar baz</li>");
}())
Read the Getting Started article on the Chrome Developers site for more in-depth information on how the whole process of creating an extension works.
Upvotes: 1
Reputation: 1300
Without jQuery:
var ul = document.getElementsByTagName("div")[0].getElementsByTagName("ul")[0];
var newElement = document.createElement("li");
var textNode = document.createTextNode("New Element");
newElement.appendChild(textNode);
ul.appendChild(newElement);
Upvotes: 0