CODEWITHSUNDEEP
javascripthtmljsongoogle-chrome-extension
122333123183
122333123183

Reputation: 59

How to modify a site element with chrome extensions

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

Answers (2)

Whymarrh
Whymarrh

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

belykh
belykh

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

Related Questions