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') |
<html> | |
<head>...</head> | |
<body> | |
<header> | |
<h1>🐥 Easy GitHub</h1> | |
</header> | |
<script src="popup.js"></script> | |
</body> | |
</html> |
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> |
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` | |
}); | |
} | |
); |
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 }; | |
})()`; |
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.
Webmentions
Loading counts...