Chrome Extensions: How to get specific information from a page

Question

I'm going to try to make this as clear as possible...

Essentially I want to make a browser action extension that displays information from the currently visited page into a pop window. For example show title of the page, URL, images and so on)

I am new to the development of extensions and I am getting a little confused with what is going on.

I've done the chrome tutorials. Could someone point me into the right direction or show me a basic example please.

Thank you

score 3 · Answer 1 · edited May 23 '17 at 12:03

Here's what you would need :

One popup page which opens when you click on your extension icon on Chrome. This page should have a piece of javascript running that sends a message to the content script in the current selected tab and listens for the reply sent back by the content script. Something like :

$(function (){
chrome.tabs.query({active: true, currentWindow: true}, function (tabs){
      chrome.tabs.sendMessage(tabs[0].id, {action: "getDetails"}, function(details){
             //use details here
      });
    });
});

One content script which is injected directly into the main page (the page for which you need to extract the url in other information). This content script reads the information and passes it to the popup page via sendMessage api. Something like this :

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { 
     //get details
     sendResponse(details);          
    });

Here's an SO thread that mentions how you could talk to a popup page from content script : Chrome Extension how to send data from content script to popup.html

HTH!

Chrome Extensions: How to get specific information from a page

1 Answers1