Access inner html of page of active tab

**rock_galore** · 06-02-2009, 06:58 AM

Hi,
it would help us helping you if you would tell us what you`re planning to do with the innerHTML and what problems you`re facing exactly.
Assuming you want to manipulate the DOM it`s pretty useless to send the innerHTML to the extension, because the extension can`t manipulate the page as you read above. This has to happen in the content script itself.

**Gaurang033** · 06-02-2009, 08:03 AM

The basic requirement is to change the content of the page dynamically. And it should happen only when user clicks on the tool-strip button.

Now if I use the content script (only). It changes the content of the page. no matter use requires it or not.

So I am planning something like this..
1. When the User will click on the button. I will post the message to send the innerHTML.
2.Content script will send the innerhtnk which I will modify it and will send it back.
3. content script will set the provided innerhtml...

If there is any way, other then content script to manipulate the innerHTML i will be glad to use it.

**Kyrax** · 06-02-2009, 10:55 AM

Why not just have the toolstrip send a message to the content script to "activate" it and then do all your modifications in place ?

Anyway, what you are trying to achieve is feasible and shouldn't be too hard to do.
I'll try to help if you have difficulties.

**rock_galore** · 06-02-2009, 11:05 AM

Do me a favor and read the links i gave you!

First, why do you want to commit the body-element to the extension? It`s both JS and you can do the manipulation right where you are.
Second, there is no way of DOM-manipulating from the extension. This means, even if you are able to commit the body-element to the extension somehow it will no longer be a DOM-element. therefore you don`t have methods like getElementById and so on.

In your case, you can do what you intend with the following example:
manifest.json

Code:

{
  "content_scripts": [
    {
      "js": [
        "content_script.js"
      ], 
      "matches": [
        "http://*/*",
        "https://*/*"
      ]
    }
  ], 
  "description": "Testextension for DOM-manipulation", 
  "name": "Testextension", 
  "toolstrips": [
    "toolstrip.html"
  ],
  "version": "0.1"
}

toolstrip.html

Code:

<html>
	<head>
		<script src='functions.js' type='text/javascript' />
	</head>
	<body onload="registerHandlers()">
		<div id="button" class="toolstrip-button">
		  Manipulate me
		</div>
	</body>
</html>

functions.js

Code:

var button = null;
var comPorts = [];
chrome.self.onConnect.addListener(function(port) {
	comPorts[port.tab.id] = port;
});

function registerHandlers()	{
	button = document.getElementById("button");
	button.addEventListener("click",handleClick);
}

function handleClick() {
	chrome.tabs.getSelected(null,function(tab)	{
		if (comPorts[tab.id]) {
			comPorts[tab.id].postMessage("manipulate");
		}
	})
}

content_script.js

Code:

var port = chrome.extension.connect();
port.onMessage.addListener(function(data) {
	var body = document.getElementsByTagName("body")[0];
	body.innerHTML = "Well done";
});

The comPort-array seems to be required, because by the time you click the button the selected tab and the last tab that sent a connect to the extension are not coercively the same.
This is not very nice, but it works, if someone knows a better way, let me know, i need this for one of my extensions as well. ;-)

**Kyrax** · 06-02-2009, 11:08 AM

rock_galore's solution seems pretty solid.
I'd go with that ;D

Good job.

**gillianreynolds** · 05-16-2011, 10:51 AM

This content covers features introduced in Firefox 3.

Open this url and introduced firefox 3. :

https://developer.mozilla.org/en/Too...uelIBrowserTab Thanks oostende hotels near train station

LinkBack

Thread Tools

Display

Similar Threads

HTML 5 <video> tags or the end of Flash

HTML Home

editing/skinning the default home page (most visited page)

Posting Permissions