Welcome guest, is this your first visit? Create Account now to join.
Page 1 of 2 12 LastLast
Results 1 to 10 of 16

This is a discussion on Access inner html of page of active tab within the Plugins Development section, part of the Chrome Plugins category: Hi.. Is anybody knows how to access the innerhtml of the page of the active tab. ?? I tried the ...


  1. #1
    Gaurang033 is offline Junior Member
    Join Date
    May 2009
    Posts
    9

    Default Access inner html of page of active tab

    Hi..
    Is anybody knows how to access the innerhtml of the page of the active tab. ??
    I tried the following code. But seems like it is not working.
    Code:
    document.getElementsByTagName("body")[0].innerHTML = "Gaurang";
    After running this code I was hoping that the content of the page will be chagned to "Gaurang", but rather the the name of my toolstrip-button changed to "Gaurang"

  2. #2
    Lex1 is offline Member
    Join Date
    Jan 2009
    Posts
    67

  3. #3
    Gaurang033 is offline Junior Member
    Join Date
    May 2009
    Posts
    9

    Default

    hey thanks lex,
    But i didn't get any help from there. I just wanna know how to get the reference of the innerHTML of the active tab.

  4. #4
    Lex1 is offline Member
    Join Date
    Jan 2009
    Posts
    67

    Default

    Use content script and postMessage. Also read http://www.aaronboodman.com/

  5. #5
    Gaurang033 is offline Junior Member
    Join Date
    May 2009
    Posts
    9

    Default

    Tanks lex for ur quick reply.
    I was thinking to use the content script. But is if i will use the content script it will be invoked automatically, which i don't want.

    I have a toolstrip button. And I want to access the innerHTML when I press that button.
    Any way to do this ???

  6. #6
    rock_galore is offline Junior Member
    Join Date
    May 2009
    Posts
    23

    Default

    Quote Originally Posted by Gaurang033 View Post
    I have a toolstrip button. And I want to access the innerHTML when I press that button.
    Any way to do this ???
    Right now there`s no way of doing this directly from the extension, because extension and web page run in different processes.
    But you can do it via content scripts as Lex said. Make a content script, open a port to the extension, add an onMessage-eventhandler with your code.
    Then, e.g. onclick of your toolstrip, send a message from the extension to the content script, your eventhandler will be called and your code will be executed.

    I hope they`ll provide a more easy way, maybe you want to read this:
    http://groups.google.de/group/chromi...0aedb89dc42bef

  7. #7
    Kyrax is offline Senior Member
    Join Date
    Apr 2009
    Location
    Qc, Canada
    Posts
    495

    Default

    If you check the google reader sample extension, there's an example there.

    You can also check the source code of CustomNewTab, I used something very similar to edit the content of the new tab page and get data from the toolstrip (the config).

  8. #8
    Gaurang033 is offline Junior Member
    Join Date
    May 2009
    Posts
    9

    Default

    Thanks guys for your suggestion..
    Now i am working on it.. but facing the problem..

    I have my content script as follows
    Code:
    alert("content script");
    var port = chrome.extension.connect();
    port.onMessage.addListener(function(data) {
      alert("inside listener");
    });
    alert("End");
    and my toolstrip.html as following.
    Code:
    <div class="toolstrip-button" onclick='test();'>
        <span>Click</span>
    </div>
    <script>
    function test() {
    chrome.self.onConnect.addListener(function(port) {
      port.onMessage.addListener(function(data) {
      });
      port.postMessage({message: "Hi", values: [true]});
    });
    }
    </script>
    The json file is as sollowing..
    Code:
    {
      "name": "My First Extension",
      "version": "1.0",
      "description": "The first extension that I made.",
      "toolstrips": [ "my_toolstrip.html" ],
       
       "content_scripts": [
        {
          "js": ["foo.js" ], 
          "matches": ["http://*/*" ]
        }
    ]
    }
    Now I was hoping that when I will click on the "Click" button the third alert box "inside listener" will appear, But i am not able to see it.. can you guys help me finding our what the hell I am doing wrong.

  9. #9
    Gaurang033 is offline Junior Member
    Join Date
    May 2009
    Posts
    9

    Unhappy

    Thanks guys for your suggestion..
    Now i am working on it.. but facing the problem..

    I have my content script as follows
    Code:
    alert("content script");
    var port = chrome.extension.connect();
    port.onMessage.addListener(function(data) {
      alert("inside listener");
    });
    alert("End");
    and my toolstrip.html as following.
    Code:
    <div class="toolstrip-button" onclick='test();'>
      
      <span>Click</span>
    </div>
    <script>
    function test() {
    
    chrome.self.onConnect.addListener(function(port) {
      port.onMessage.addListener(function(data) {
    	
      });
      port.postMessage({message: "Hi", values: [true]});
    });
    
    }
    </script>
    The json file is as sollowing..
    Code:
    {
      "name": "My First Extension",
      "version": "1.0",
      "description": "The first extension that I made.",
      "toolstrips": [ "my_toolstrip.html" ],
       
       "content_scripts": [
        {
          "js": ["foo.js" ], 
          "matches": ["http://*/*" ]
        }
    	]
    }
    Now I was hoping that when I will click on the "Click" button the third alert box "inside listener" will appear, But i am not able to see it.. can you guys help me finding our what the hell I am doing wrong.

  10. #10
    Gaurang033 is offline Junior Member
    Join Date
    May 2009
    Posts
    9

    Default

    Thanks guys for your suggestions.

    I have started working on that. But facing few problems. I am able to send the messge from the content script to the extenstion script but when i do the reverse i am facing problems.

    My Basic requirement is that. When I click on the button the Content script should send me the InnerHTML. But i am not able to do so.. Not sure is it 100% possible or not..


    My mainfest.json file is as follows
    Code:
    {
      "name": "My First Extension",
      "version": "1.0",
      "description": "The first extension that I made.",
      "toolstrips": [ "my_toolstrip.html" ],
       
       "content_scripts": [
        {
          "js": ["foo.js" ], 
          "matches": ["http://*/*" ]
        }
    	]
    }
    foo.js

    Code:
    var port = chrome.extension.connect();
    port.onMessage.addListener(function(data) {
      console.log("The extension said: " + data.message + " with values: " + data.values);
    });
    port.postMessage({message: "Hello!", values: [1,2,3]});
    my_toolstrip.js

    Code:
    <div class="toolstrip-button" onclick='test();'>
      <img src="highlighter.png">
      <span>Click</span>
    </div>
    <script>
    function test() {
    chrome.self.onConnect.addListener(function(port) {
      port.onMessage.addListener(function(data) {
        console.log("The content script said: " + data.message + " with values: " + data.values);
      });
      port.postMessage({message: "Yoes", values: [true,false,null]});
    });
    }

Page 1 of 2 12 LastLast

Similar Threads

  1. HTML 5 <video> tags or the end of Flash
    By Luc VN in forum Chrome Tech
    Replies: 4
    Last Post: 03-23-2010, 06:32 AM
  2. HTML Home
    By ducktape in forum Chrome Tips & Tricks
    Replies: 12
    Last Post: 04-15-2009, 12:26 AM
  3. Replies: 1
    Last Post: 03-14-2009, 02:49 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •