Modify page DOM on click in page action popup

7,001 views
Skip to first unread message

AlexVN

unread,
Apr 12, 2010, 1:03:42 PM4/12/10
to Chromium-extensions
Hello,

I'm looking for a method of modifying current tab content (inject
HTML, CSS, JavaScript) when user click on an element in page action
popup.

For example:
popup.html
<a href="#" onclick="modifyPage">modify</a>

When user clicks on this link the page should be modified.

As far as I got it, I should use contentscript.js somehow, probably
subscribe on onRequest event like this:
chrome.extension.onRequest.addListener(function ()
{ document.body.innerHTML = ''; });

and then send request from the modifyPage method. But this approach
does not work. Any other one?

Thanks,
Alex

Mohamed Mansour

unread,
Apr 12, 2010, 5:47:24 PM4/12/10
to AlexVN, Chromium-extensions
Hi Alex,

You could leverage executeScript and insertCSS:

But the other way should work fine. You were referring to message passing

If your using message passing, make sure you register a listener on your content script and you send the request from your popup to modify your DOM on the webpage your visiting. The URL mentioned above has good working examples.


-
Mohamed Mansour
m...@chromium.org



--
You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.
To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.


AlexVN

unread,
Apr 12, 2010, 9:45:40 PM4/12/10
to Chromium-extensions
Mohamed,

Thank you for the answer. I've read the articles that you point on but
still have not good understanding of what should I do to pass message
from popup to content script.

Here is a complete example of what I'm trying to do:

manifest.js

{
"name": "GCETest",
"version": "1.0",
"description": "GCETest",
"background_page" : "background.html",
"page_action": {
"default_icon": "icon.png", "default_title": "Click me...",
"default_popup": "popup.html"
},
"content_scripts": [ { "matches": ["http://*/*"], "js":
["contentscript.js"] } ],
"permissions": ["tabs"]
}

background.html

<!DOCTYPE html>
<html>
<head>
<script>
function onRequest(request, sender, sendResponse) {
console.log('background.html: ' + request.action);
if (request.action == 'show')
chrome.pageAction.show(sender.tab.id);
sendResponse({});
};
console.log('background.html: setup "onRequest" listener');
chrome.extension.onRequest.addListener(onRequest);
</script>
</head>
</html>

contentscript.js

console.log('contentscript.js: setup "onRequest" listener');
chrome.extension.onRequest.addListener(function (request, sender,
sendResponse) {
console.log('contentscript.js: ' + request.action);
if (request.action == 'modify')
document.body.appendChild(
document.createTextNode('This does not work...'));
sendResponse({});
});
console.log('contentscript.js: sending "show" request');
chrome.extension.sendRequest({action:'show'}, function(response) {});

popup.html

<html>
<head>
<script>
function send() {
console.log('popup.html: sending "modify" request');
chrome.extension.sendRequest({action:'modify'}, function(response)
{});
window.close();
}
</script>
</head>
<body><a href="#" onclick="send();">Click me...</a></body>
</html>

The workflow is simple:
1. background.html attaches listener on onRequest that enables page
action.
2. contentscript.js attaches listener on onRequest and sends a request
that enables page action.
I'm suspecting that both listeners should be called, but it did not
happen. Only listener attached by background.html is notified.
3. popup.html should send request which should notify listeners but
only listener attached by background.html is notified again.

I think that I do something wrong because listener attached by
contentscript.js is not notified, but I do not know what exactly I'm
doing wrong.
Maybe popup.html should notify content script in some other way or
background.html should modify the DOM or maybe background.html should
resend request?

Thanks,
Alex

On Apr 13, 12:47 am, Mohamed Mansour <m0.interact...@gmail.com> wrote:
> Hi Alex,
>
> You could leverage executeScript and insertCSS:http://code.google.com/chrome/extensions/tabs.html#method-executeScript

>  <http://code.google.com/chrome/extensions/tabs.html#method-executeScript>http://code.google.com/chrome/extensions/tabs.html#method-insertCSS

> > To post to this group, send email to chromium-extensi...@chromium.org.


> > To unsubscribe from this group, send email to

> > chromium-extensions+unsubscr...@chromium.org<chromium-extensions%2Bunsubscr...@chromium.org>

Mohamed Mansour

unread,
Apr 12, 2010, 10:33:20 PM4/12/10
to AlexVN, Chromium-extensions
Remember that if you want to send a request to a content script from any extension page, you would need to tell it which tab you would like to send it to. 

In your example above, I noticed that in your popup.html, you are not sending the request correctly to your content script. Try doing this to see if it will work in your popup.html

  chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, {action:'modify'}, function(response) {});
  });

When you issue a chrome.extension.sendRequest, your trying to send a single request to other listeners within the extension (not contentscript), you would need to use the following:


-
Mohamed Mansour
m...@chromium.org


To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.

AlexVN

unread,
Apr 12, 2010, 10:51:29 PM4/12/10
to Chromium-extensions
Thank you, Mohamed. Works perfect!

Sincerely,
Alex

> > <chromium-extensions%2Bunsubscr...@chromium.org<chromium-extensions%252Bunsubscr...@chromium.org>

Reply all
Reply to author
Forward
0 new messages