Question

I’m building a firefox extension, and essentially, I want to add in a button on the webpages on a specific site. I know that exactly where I need to make a change in the page source, and what I need to put, but I don’t know how to
1. read the page source (I should be able to figure that out on my own)
2. edit the page source (I have been lurking but couldn’t find any way to do it)
3. automatically update the displayed page

Also, in general, is this the best approach? the main thing is, I want to inject code seamlessly into the page. For example, the page source of stack overflow contains a section like this:

<div class="nav mainnavs">
                <ul>
                    <li><a id="nav-questions" href="/questions">Questions</a></li>
                    <li><a id="nav-tags" href="/tags">Tags</a></li>
                    <li><a id="nav-users" href="/users">Users</a></li>
                    <li><a id="nav-badges" href="/badges">Badges</a></li>
                    <li><a id="nav-unanswered" href="/unanswered">Unanswered</a></li>
                </ul>
            </div>

What if I wanted to inject the line

<li><a id="nav-home" href="http://stackoverflow.com/">Home</a></li>

And so that a home button appears?

Answer 1

you can do it something like this

$("div.easy_editor ul").append('<li><a id="nav-home" href="http://stackoverflow.com/">Home</a></li>');