chrome-extension-popup-parser-sample
Chrome extension sample for parsing web pages from popup
Sample project for ...
- Open new tab in the background from the popup
- Get some of document content from the tab
- Display the content on the popup
Points
manifest.json
// Show popup when tool bar icon is clicked
"browser_action": {
"default_icon": "icon128.png",
"default_popup": "popup/popup.html"
},
"permissions": [
// Allow access to chrome.tabs apis
"tabs",
// Allow access to content of specific url or host
"https://en.wikipedia.org/wiki/Main_Page"
]
popup.js
// Load new tab on the background
async function loadNewTab(url, timeoutSeconds = 5) {
return new Promise((resolve, reject) => {
let targetTabId = null
const listener = (tabId, changedProps) => {
if (tabId != targetTabId || changedProps.status != 'complete') {
return
}
chrome.tabs.onUpdated.removeListener(listener)
resolve(tabId)
}
chrome.tabs.onUpdated.addListener(listener)
chrome.tabs.create({ url, active: false }, (tab) => {
targetTabId = tab.id
})
setTimeout(() => {
reject(new Error('Timeout...'))
}, timeoutSeconds * 1000)
})
}
// Recieve the result of script on the background tab
async function parseWikipedia(tabId) {
return new Promise((resolve, reject) => {
chrome.tabs.executeScript(
tabId,
{ file: 'parser/parseWikipedia.js' },
(results) => {
if (results[0] === null) {
reject(new Error('Failed to parse wikipedia.'))
} else {
resolve(results[0])
}
}
)
})
}