How to get an element text from a newly created chrome tab using chrome.tabs.create

Question

Im very new in creating a chrome extension.

I have created few tabs using the code:

chrome.tabs.create({url:" https://www.example.com/user.html#e "+userId, active:true}, function(tab){}

Post creation how can I access the DOM and elements inside the newly created tabs.

Please help me.

Answer 1

Content scripts

Chrome extensions can access the DOM via content scripts.

As the docs explain, these scripts can be loaded into tabs and then access the DOM from there. For example:

manifest.json:

{
  "version": "0.1.0",
  "name": "Hello world",
  "description": "Sample extension using content script",
  "permissions": [
    "<all_urls>",
    "tabs"
  ],
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "contentScript.js"
      ],
      "run_at": "document_end"
    }
  ],
  "manifest_version": 2
}

contentScript.js:

var myElement = document.getElementById("mySelect");

// Logic to alter myElement, etc.

If you want to send messages and data between the content script and the background of your extension then you'll need to take a look at message passing .

chrome.tabs.executeScript

You can also access the DOM using the chrome.tabs.executeScript method.

This SO answer explains how.