Getting DOM content from Chrome Extension

_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.

document.querySelector('h1')

view raw document.querySelector('h1').json hosted with ❤ by GitHub

  
          <html>
        
            <head>...</head>
        
            <body>
        
              <header>
        
                <h1>🐥 Easy GitHub</h1>
        
              </header>
        
              <script src="popup.js"></script>
        
            </body>
        
          </html>

view raw page_action.html hosted with ❤ by GitHub

page_option.html

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.

  
          chrome.tabs.query(
        
            { 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

popup.js

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.

	<html>
	<head>...</head>
	<body>
	<header>
	<h1>🐥 Easy GitHub</h1>
	</header>

	<script src="popup.js"></script>
	</body>
	</html>

	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 };
	})()`;