CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Sorin Adrian Carbunaru
Sorin Adrian Carbunaru

Reputation: 618

Get current document with Javascript

I have a Chrome extension which, when you click on the icon, displays a text field and a button, used for searching. The displayed content is basically an HTML document called from the manifest like this:

"browser_action": {
    "default_popup": "popup.html"
 }

Now, the question is how can I access the current document loaded in the browser, using javascript? Because I want to extract the question from the text field and then go and find the answer in the current document.

Thank you!

EDIT1:

Code:

manifest.json

{
  "name": "SmartSearch",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Smart Search extension for Google Chrome.",
  "content_scripts": 
  [
  {
    "matches": ["<all_urls>"],
    "js": ["smartsearch.js"]
  }
  ],
  "browser_action": {
     "default_icon": "icon.png",
"default_popup": "popup.html"
  }

}

smartsearch.js

SmartSearch() = function (){

    var x = document.title;
    alert(x);
}
window.onload = SmartSearch;

popup.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Smart Search</title>
    <script type="application/javascript" src="smartsearch.js"></script>
  </head>
  <body>
    <p>Smart Search</p>
    <form>
      <input type="text" id="search_text_field"></input>
      <input type="button" id="search_button" value="Search"/>
    </form>
  </body>
</html>

For now, all I want to do is to display the title of the current loaded page when I press on the extension icon, just to check if I have acces to the DOM. The problem is that I get the title of the popup. What's the solution?

EDIT2: I see that if I go to a page, the alert with the title of the page does appear when it loades (there are some exceptions, like youtube page), but I want to do that when I press the icon of the extension.

Upvotes: 2

Views: 5441

Answers (2)

limoragni
limoragni

Reputation: 2776

You need to use a content script wich you can declare on your manifest like this:

  {
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],
  ...
}

Where matches is the domain in which you are going to be using the script. That way the css and js are inside the document itself. But if you need to send data from the document to your plugin, you need to use Message Passing. Here you have an example of how you can send a message from the content script to the plugin.

  chrome.extension.sendMessage({greeting: "hello"}, function(response) {
      console.log(response.farewell);
  });

And then you have to use chrome.extension.onMessage.addListener to recive the message. Example:

    chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
          console.log(sender.tab ?
              "from a content script:" + sender.tab.url :
              "from the extension");
          if (request.greeting == "hello")
              sendResponse({farewell: "goodbye"});
  });

On the other hand if you want to send a Message from the plugin to the content script you have to use. 

chrome.tabs.getSelected(null, function(tab) {
  chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });
});

And the same as before chrome.extension.onMessage.addListener to recive the message on the other side.

This is a very good resource for getting started.

EDIT: A working example of the initialization of the content_scripts

Manifiest:

    {
    "name": "Intervention",
    "version" : "1.0",
    "content_scripts": [
    {
      "matches": ["http://*/**"],
      "js": ["action.js"]
    }

   ],

  "manifest_version" : 2
}

JS

var element = document.title;
alert(element);

Upvotes: 2

sachleen
sachleen

Reputation: 31141

You want to run a content script on the pages and use message passing to interact between your extension and tabs.

The content script gets a request from your extension, does the computation on the page (you'll have access to the DOM so you should be able to do anything on the page).

The content script will then send a response back to your extension which you can display in the popup.

Upvotes: 0

Related Questions