Chrome Extension -- Displaying html in the popup

Question

I was just thinking whether a chrome extension could do this use-case.

I have loaded a web-page. Which has some html code on it (I meant the web page itself is also displaying some html code)

Like this image.

Webpage

This wikipedia contains some html. Which I could extract possibly from doing a regex of html to /html

I would like to build a chrome extension that could use this html code on the page (I know how I could extract it through regex) and display it inside a extension popup. It's like invoking a browser itself in the popup.

Some link's suggestions would be welcome from where I can start.

Could this be done.

Update:

re.js

chrome.tabs.query( {
    active: true,
    lastFocusedWindow: true
},

function getHTML(document){
    var test = document_r.body;
    var text = test.textContent;
    var bodyStart="<BODY";
    var bodyEnd="</BODY>"
    var regex = bodyStart +"(.*?)"+ bodyEnd;
    var regexg = new RegExp(regex, "g");
    match = regexg.exec(text);
    return match;
}

function(array_of_Tabs,document) {
    var tab = array_of_Tabs[0];
    //tab.url; - url of the active tab
    getHTML(document);
    chrome.tabs.executeScript(tab.id, {code: "chrome.runtime.sendMessage();"});
});

chrome.runtime.onMessage.addListener(function(request,document) {
  document.getElementsByTagName('html')[0].innerHTML = request;
});

Ok So maybe i can call getHTML in function(array_of_tabs,document) I have the regexed string which contains the html code. Now how do i run that HMTL code in the popup.

gthacoder · Answer 1 · 2013-12-22T03:06:41.387

2

Yes, you can do that. There's no problem with that case. You need to get current tab ID using chrome.tabs.query(), then execute JavaScript code inside that tab (ejection), and finally send runtime message from that tab (during JavaScript ejection) to the popup to substitute its HTML code with that received code. I just created a sample extension to illustrate that:

manifest.json:

{
  "name": "HTML opener",
  "description": "Open the current page in popup window",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "browser_action": {
    "default_title": "HTML opener",
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

popup.html:

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>    
    <style>
      body {
        min-width: 300px;
        overflow-x: hidden;
      }
    </style>
    <script src="popup.js"></script>
  </head>
  <body>
  </body>
</html>

popup.js:

chrome.tabs.query( {
    active: true,
    lastFocusedWindow: true
},
function(array_of_Tabs) {
    var tab = array_of_Tabs[0];
    //tab.url; - url of the active tab

    chrome.tabs.executeScript(tab.id, {code: "chrome.runtime.sendMessage(document.getElementsByTagName('html')[0].innerHTML);"});
});

chrome.runtime.onMessage.addListener(function(request) {
  document.getElementsByTagName('html')[0].innerHTML = request;
});

If you have any question about the code above, please ask. If you want to read more about chrome.tabs (get information about tabs) and chrome.runtime (send messages between different parts of your extension), you may find these links interesting: http://developer.chrome.com/extensions/tabs.html, http://developer.chrome.com/extensions/runtime.html.

edited Dec 22 '13 at 03:06

answered Nov 27 '13 at 23:27

gthacoder

2,213
3
15
17

Thanks for this ..!! This gives me a head start :) – rahul888 Nov 28 '13 at 05:57
Hi updated code in the question . Please have a look and tell me how do i go from here..!! @gthacoder – rahul888 Nov 28 '13 at 06:38
1

Why do you need both the `activeTab` and `tabs` permisdions ? – gkalpak Nov 28 '13 at 06:38
@ExpertSystem : Can u help me out here . Do you have any idea how do i display the html code i regexed..? – rahul888 Nov 28 '13 at 07:31
1

@rahul888: **[Here is why](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454)** you should **not** parse HTML with regex. Why do you need regex ? – gkalpak Nov 28 '13 at 08:30
@ExpertSystem-- My case is different mate. I have to parse it through regex itself . Because my actual HTML web page has that HTML code displayed here as text(Like an example) – rahul888 Nov 28 '13 at 09:20
@ExpertSystem You are right. It was a misprint. "activeTab" is enough, of course. I fixed that. – gthacoder Nov 29 '13 at 01:03

score 2 · Answer 2 · answered Nov 29 '13 at 00:48

I got you. Apparently, you want to parse current page's HTML code to find some HTML samples inside. Just modify my code a little bit. You need to put all the JavaScript that is inside your getHTML() function into the string inside executeString() call. That way is weird, but the string inside executeString() call is the code that is running inside the opened page's HTML (and you can get any inner HTML when you are inside), so you should use it. After some changes in my code, the popup shows the page with all <p> elements coloured red (as an example that you can get HTML code and modify it; in your case you are cutting the HTML according to the regular expression matching result instead of making text red):

popup.js:

chrome.tabs.query( {
  active: true,
  lastFocusedWindow: true
},
function(array_of_Tabs) {
  var tab = array_of_Tabs[0];
  //tab.url; - url of the active tab

  chrome.tabs.executeScript(tab.id, {code: "var match = document.getElementsByTagName('html')[0].innerHTML + '<style>p{color:red}</style>'; chrome.runtime.sendMessage(match);"});
});

chrome.runtime.onMessage.addListener(function(request) {
  document.getElementsByTagName('html')[0].innerHTML = request;
});

You can change the JavaScript code inside that string depending on what you want from your regular expression. The point is that you have to write your getHTML() algorithm inside the string you are injecting using executeString(). It is kind of weird, but that's the way you can execute something inside opened page's code, and you need that to get access to its code. It's only left for you to work on your regular expression logic. I guess that answers your direct question about how to invoke some JavaScript algorithm inside currently opened tab's code and send something to your popup.

I can't figure how to do that My code is returning null.. May be I am doing it wrong. I don't know how to do this regex match in the `code:` part. — rahul888, Nov 30 '13 at 10:27

Chrome Extension -- Displaying html in the popup

2 Answers2