Getting DOM content from Chrome Extension
Photo by Sai Kiran Anagani on Unsplash
Note to self on how to get DOM content from Chrome Extension
As I was building a Chrome Extension, Easy GitHub to generate I had to get DOM content on a GitHub page to see if it's a forked page or not.
Easy GitHub is to display initially a way to sync forked repository with the master repository.
Reference Paul Seal's blog - How to keep your fork up to date with the master repository in GitHub
For forked GitHub page, GitHub page contains a meta tag named octolytics-dimension-repository_parent_nwo , which contains the parent repository the current repository is forked from.
But if the current page is not a fork repo page, then it doesn't have octolytics-dimension-repository_parent_nwo but have to use go-import meta value.
As a last resort, I needed to use window.location.href(or show a message that it's not a repo page in Chrome Extension popup).
When using document.getElementBy* or document.querySelector* within Chrome Extension, it fetches DOM for the extension HTML files, not from the tab content.
So to retrieve DOM content, one need to execute a script within a tab by sending a query (document.querySelector* or document.getElement*) like following.
| 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; | |
| const href = window.location.href; | |
| return { forkUrl, url, href }; | |
| })()`; | |
| chrome.tabs.executeScript(tabId, { code }, function(result) { | |
| const { forkUrl, url, href } = result[0]; | |
| if (forkUrl) { | |
| document.getElementById("url").innerText = ` | |
| git remote add upstream https://github.com/${forkUrl} | |
| git fetch upstream | |
| git branch --set-upstream-to=upstream/master master`; | |
| } else if (url) { | |
| document.getElementById("url").innerText = ` | |
| git remote add upstream https://${url} | |
| git fetch upstream | |
| git branch --set-upstream-to=upstream/master master`; | |
| } else { | |
| document.getElementById("url").innerText = ` | |
| git remote add upstream ${href} | |
| git fetch upstream | |
| git branch --set-upstream-to=upstream/master master`; | |
| } | |
| }); |
Execute Script within a Tab to extract DOM content
Source code on GitHub.
You can see above that, you pass a code to query DOM elements and extract URLs, which you can use to create a git command script.
You can add a tabs permission to execute the script but it can be too detrimental thus you can simply add URLs to allow script executions.
| "permissions": [ | |
| "http://*/*", | |
| "https://*/*" | |
| ] |
"permissions" section in Chrome Extension manifest.json
Reference - Stack Overflow - chrome.tabs.executeScript not working?