When user click the extension icon, it opens a sandboxed new page in new tab. From the page, I want to access data from storage. Didn't find any useful info from official doc, please enlighten me.
manifest.json
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2,
"background": {
"scripts": [
"background.js"
],
"persistent": true
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "My extension"
},
"permissions": ["activeTab", "tabs", "storage", "<all_urls>"],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"sandbox": {
"pages": ["newtab.html"]
}
}
background.js
chrome.browserAction.onClicked.addListener(function(tab){
chrome.tabs.create({
url: chrome.extension.getURL("newtab.html"),
})
});
newtab.html
<html>
<head>
<script src="vue.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body
</html>
app.js
window.addEventListener('load', function () {
// access data from storage
})
The reason I'm using a sandbox page, is because Im using Vue.js which needs to use eval.
Related
I'm developing a cross-browser extension which works in Chrome but not in Firefox - the background script is not loading.
I tried console.log in background.js and sending a message to the content script and logging message there.
background.js
browser.action.onClicked.addListener(async function (tab) {
console.log("clicked on extension icon");
browser.tabs.sendMessage(tab.id, { text: "toggle_overlay" })
});
js/content.js
...
browser.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
console.log("message received", msg)
});
Content script works as expected on all code that's not depended on background.js
Folder structure
manifest.json (had to downgrade to v2 because Firefox doesn't support v3 yet)
{
"name": "Dev Mode",
"description": "Dev Mode",
"version": "0.0.1",
"manifest_version": 2,
"icons": {
"16": "./imgs/icon-16-dark.png",
"48": "./imgs/icon-48.png",
"128": "./imgs/icon-128.png"
},
"permissions": [
"activeTab",
"contextMenus",
"bookmarks",
"scripting",
"storage",
"<all_urls>"
],
"background": {
"scripts": ["background.js"],
"persistent": false // <-- also tried without, same result - background script doesn't lod
},
"browser_action": {
"default_icon": "./imgs/icon-16-dark.png",
"default_title": "Default Title"
},
"commands": {
"save-page": {
"suggested_key": {
"default": "Ctrl+Shift+S",
"mac": "Command+Shift+S"
},
"description": "some description"
}
},
"content_security_policy": "script-src 'self'; object-src 'self'; sandbox allow-scripts; script-src 'self' https://apis.google.com https://www.gstatic.com https://www.googleapis.com https://securetoken.googleapis.com; object-src 'self'",
"web_accessible_resources": [ "imgs/*.png", "overlay.html"],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"/js/content.js"
],
"run_at": "document_end",
"all_frames": false
}
]
}
I'm testing the Firefox extension with web-ext run to test the extension locally.
The correct API for this in Manifest v2 is browserAction instead of action that is only available in MV3.
So to fix it, in your background.js, switch to
browser.browserAction.onClicked.addListener
browser.action in Firefox is available in MV3. Your extension uses MV2 i.e. "manifest_version": 2,
Note: This API is available in Manifest V3 or higher.
Note: MV3 support is very limited in Firefox at the moment.
I have the following flow in my Google Chrome extension:
popupup.html runs popup.js (works fine):
<body>
<button id="copy">Get Data</button>
<script src="https://www.gstatic.com/firebasejs/7.2.2/firebase.js"></script>
<script src="popup.js"></script>
</body>
popup.js executes a basicData.js (works fine):
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("copy").addEventListener("click", startHandler);
});
function startHandler() {
chrome.tabs.executeScript({file: "basicData.js"}, function() {
});
}
basicData.js does some calculations etc and then sends a message to the background script:
...
console.log("Hello world"); //prints fine
chrome.runtime.sendMessage({...data});
background.js does not receive any message:
chrome.runtime.onMessage.addListener(function(response,sender,sendResponse) {
console.log("hiya")
if (response.type==="Data complete"){
console.log("Hello2");
chrome.tabs.sendMessage({...response});
}
})
Here is my manifest.json for reference:
{
"name": "Project X",
"version": "1.0",
"description": "Build an Extension!",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["<all_urls>","http://*/*", "https://*/*"],
"js": ["testScript.js"]
}
],
"browser_action": {
"default_popup": "popup.html"
},
"content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'; connect-src 'self' wss://*.firebaseio.com;",
"permissions": ["tabs","storage","declarativeContent", "activeTab","http://*/","https://*/","webNavigation"],
"manifest_version": 2
}
I copied most of this code and flow from a Google Chrome extension I made in the past which worked absolutely fine, so I am not sure why either basicData.js is not sending the message or background.js is not receiving it. All suggestions are appreciated.
Thanks for reading.
What am I missing that popup is not being shown?
In an extension folder I have four files. I load that folder as extension. I can see the icon, but when I click on it popup is not shown. Why?
content_script.js: empty (just added so that I can load the extension)
icon.png: It is shown, when I load extension.
manifest.json:
{
"name": "Popup poc",
"version": "1.4",
"description": "Simple popup example",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content_script.js"]
}
],
"page_action": {
"default_name": "Display Map",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html:
<!doctype html>
<html>
<head>
<title>Popup</title>
</head>
<body>
This is body
</body>
</html>
Replace "page_action" with "browser_action" in your manifest.json. You should be able to see the popup on all pages this way.
It's possible duplicate of: Chrome extension popup not showing anymore
But it seems like I don't have enough reputation points to flag it for that.
Popups only for certain hosts URL patterns
(Edit)
If you want your popup available only on certain sites (for example, only on Google), then you need to specify declarativeContent permissions in your manifest, and also a little setup in a background script.
So, your manifest.json would look something like this:
{
"name": "Popup poc",
"version": "1.4",
"description": "Simple popup example",
"permissions": ["declarativeContent"],
"content_scripts": [
{
"matches": ["https://www.google.com/*"],
"js": ["content_script.js"]
}
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_name": "Display Map",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
Your background.js would look like this:
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'www.google.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
This code is largely from the Getting Started Tutorial.
Am trying to override the history page in chrome using an extension. I have set the override page option in manifest.json file and created a new history.html file. The extension is running perfect and the history page showing blank now. I need to list all the history in my new override page history.html page. Is there any way to do this?
Here is my manifest.json file.
{
"name": "Recently visited urls",
"version": "1.0",
"description": "Recently visited urls",
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["popup.js"]
}],
"background": {
"scripts": ["jquery.js","background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Recently visited urls",
"default_popup": "popup.html",
"default_icon": "clock.png"
},
"permissions": [
"history",
"downloads"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"chrome_url_overrides": {
"history": "history.html"
},
"manifest_version": 2
}
Thanks in advance!
If you mean why your customized history page is blank, have you declared history permission in your manifest.json?
Update:
Since chrome.history api can only be accessed through background scripts, we need to do message passing from background scripts to your override history page. However, we can't inject content scripts to chrome://history and after trying many methods, I think using localStorage is a workaround to solve this problem.
manifest.json
{
"name": "Search History",
"version": "1.0",
"manifest_version": 2,
"description": "Your description",
"chrome_url_overrides": {
"history": "history.html"
},
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"permissions": [
"history"
]
}
history.html (here I just concat all localStorage in a string, you can customize your view here)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="historyText"></p>
<script src="content.js"></script>
</body>
</html>
background.js (you can configure history items number by setting maxResults to other number)
chrome.browserAction.onClicked.addListener(function () {
chrome.history.search({ text: '', maxResults: 10 }, function (data) {
data.forEach(function(page) {
localStorage.setItem("Id: " + page.id + ", title: " + page.title, page.url);
});
});
});
content.js
var historyText = "";
for(var key in localStorage) {
historyText += key + ": " + localStorage.getItem(key) + ", ";
}
document.getElementById("historyText").innerText = historyText;
I've tried everything but still not showing the popup at all when I click the browser action button of my extension. Clicking the icon doesn't show the popup.html located at the directory src/cbrowser_action/popup.html, the console doesn't give me any helpful reasons why it failed. I read a lot of the other answers but it all seem to point to manifest which I can't see anything missing.
here's my manifest
{
"name": "Tool",
"version": "0.0.1",
"manifest_version": 2,
"description": "",
"homepage_url": "",
"icons": {
"16": "icons/on.png",
"48": "icons/on.png",
"128": "icons/on.png"
},
"default_locale": "en",
"background": {
"page": "src/bg/background.html",
"persistent": true
},
"browser_action": {
"default_icon": "icons/on.png",
"default_title": "browser action demo",
"default_popup" :"popup.html"
},
"permissions": [
"<all_urls>", "management", "tabs", "webRequest","webNavigation", "webRequestBlocking", "storage"
],
"content_scripts": [
{
"run_at": "document_end",
"matches": [
"<all_urls>"
],
"js": [
"src/lib/jquery.min.js","src/inject/content.js"
],
"css": [
"src/inject/content.css"
]
}
]
}
popup.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="popup.js"></script>
<title></title>
</head>
<body>
asdfsup
</body>
</html>
popup.js
console.log('loaded');
The output of console.log is not going to be on the page console. The console scope for the popup is the popup itself by right-clicking the browser action icon and selecting "Inspect popup".
The logging output should be visible there.