Getting DOM content from Chrome Extension


title: "Getting DOM content from Chrome Extension" date: "2019-02-17" banner: ./images/featured-image-4.jpg

_Photo by James Barnett on _Unsplash

When you trying to get a DOM content in Chrome tab from an extension using document.getElementBy* or document.querySelector*, you get the DOM content of your extension HTML.

Suppose that you have a following default popup (specified as page_action -> default_popup in manifest.json).
And select the h1 content in popup.js referenced in page_option.html.

<h1>🐥 Easy GitHub</h1>
<script src="popup.js"></script>


Then instead of getting the current DOM content displayed in the Chrome tab, it returns the DOM of the page_option.html instead.

<h1>🐥 Easy GitHub</h1>
view raw returned.html hosted with ❤ by GitHub

What's returned

🤔 Workaround?

So what you need to do is to request Chrome to execute a document query command on your behalf.

{ active: true, windowId: chrome.windows.WINDOW_ID_CURRENT },
function(tabs) {
const { id: tabId } = tabs[0].url;
let code = `document.querySelector('h1')`;
// http://infoheap.com/chrome-extension-tutorial-access-dom/
chrome.tabs.executeScript(tabId, { code }, function (result) {
// result has the return value from `code`
view raw popup.js hosted with ❤ by GitHub


First you get the currently active Tab's ID (tabId).

Refer to Chrome extension tutorial – access active page dom on how that works.

Then you execute a code on the current tab (line #9). and the callback gives you result which is the result of document.querySelector.

If you want need to execute multiple queries, just put them in an IIFE.

const code = `(function getUrls(){
const forkUrl = document.querySelector('meta[name="octolytics-dimension-repository_parent_nwo"]')
? document.querySelector('meta[name="octolytics-dimension-repository_parent_nwo"]').content
: undefined;
const url = document.querySelector('meta[name="go-import"]')
? document.querySelector('meta[name="go-import"]').content.split(' ')[0]
: undefined;
return { forkUrl, url };
view raw iife.js hosted with ❤ by GitHub

Using IIFE to run multiple queries

Parting Words

I've learned about it recently while writing a Chrome extension, Easy GitHub (work-in-progress).

You can see the relevant code snippets here on GitHub.