I'm new to chrome extension coding and relatively new to javascript. The extension is of the type page_action . I'm trying to send a simple message to background.js on click of button in popup.html. I've seen similar questions on this site, however nothing seems working. The loading of the extension is fine. please help
/* __background.js__ */
function checkForValidUrl(tabId, changeInfo,tab){
console.log("Extension loaded");
chrome.pageAction.show(tabId);
}
function readMessage (request, sender, sendResponse){
alert("reached");
console.log(request.greeting);
sendRequest({farewell:"goodbye"});
}
chrome.extension.onRequest.addListener(readMessage);
chrome.tabs.onUpdated.addListener(checkForValidUrl);
/* __manifest.json__ */
{
"name": "DemoExtension",
"version": "1.0",
"manifest_version": 2,
"background": {
"scripts": [
"jquery.js",
"background.js"
]
},
"description": "demo extension to learn coding chrome extensions.",
"icons": {
"16": "images/16x16.png",
"48": "images/48x48.png",
"128": "images/128x128.png"
},
"page_action": {
"default_icon": {
"19": "images/19x19.png",
"38": "images/38x38.png"
},
"default_title": "Demo extension",
"default_popup": "popup.html"
},
"options_page": "options.html",
"permissions": [
"tabs",
"storage",
"http://*/*",
"https://*/*"
]
}
-
__popup.html__
<!DOCTYPE HTML>
<html>
<head>
<title>Demo extension</title>
<script src="./popup.js"></script>
</head>
<body>
<button id="clickMe">Add</button>
</body>
</html>
-
__popup.js__
function sendMessageToExtn() {
alert("reached in popup");
chrome.extension.sendMessage({
greeting : "hello" },
function(response) { console.log(response.farewell);
});
}
document.getElementById('clickMe').addEventListener('click', function () {
sendMessageToExtn();
});
I'm now getting error Uncaught TypeError: Cannot call method 'addEventListener' of null (anonymous function)
There is a similar question .
Solved the problem. Firstly incorporating the suggestions by #apsillers. Then finally by moving the
<script src="./popup.js"></script>
in the body from the head, below the button tags.
Related
For my Chrome extension, I need to show the pageAction only on a certain website. I used to do this with declarativeContent, but it isn't supported on Firefox, so I have to do it the manual way. The answers to this question suggested that you could simply use something like this:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (changeInfo.status === "complete" && tab.url) {
if (tab.url.match(/google.com/)) {
chrome.pageAction.show(tabId);
}
}
});
This didn't work for me, so I modified the code in the background script to look like this:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
console.log("Tab updated! Tab URL: " + tab.url);
});
Every time you update a tab the console just prints Tab updated! Tab URL: undefined a few times. I also tried to query the tab like the answers to this question said, which produces the same output.
The other files of the extension are:
manifest.json:
{
"name": "Test",
"version": "1.0",
"description": "Test for StackOverflow",
"permissions": ["activeTab"],
"background": {
"scripts": ["background.js"]
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html:
<!DOCTYPE html>
<html>
<body>
This is a popup!
</body>
</html>
You are missing the tabs permission from your manifest.json file. With this permission the URL of the tab should also be logged to the console.
"permissions": ["activeTab", "tabs"] // <-- This
manifest.json:
{
"name": "Test",
"version": "1.0",
"description": "Test for StackOverflow",
"permissions": ["activeTab", "tabs"],
"background": {
"scripts": ["background.js"]
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
I have the following really simple code in a content script that runs whenever a button in my "popup.html" file is pressed:
Section of code inside "inject.js"
browser.runtime.onMessage.addListener((message) => {
console.log("Trying to inject iFrame");
var iframe = document.createElement("iframe");
iframe.src = browser.extension.getURL("inject.html");
document.body.appendChild(iframe);
});
The content of "inject.html" is:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
Hello. This is a Test.
</p>
</body>
</html>
However, when this code runs I get the following output in the console (Using "example.com: as an example URL):
Trying to inject iFrame
Security Error: Content at http://example.com/ may not load or link to moz-extension://218287b3-46eb-4cf6-a27f-45b9369c0cd9/inject.html.
Here is my "manifest.json"
{
"manifest_version": 2,
"name": "Summarizer",
"version": "1.0",
"description": "Summarizes webpages",
"permissions": [
"activeTab",
"tabs",
"storage",
"downloads",
"*://*.smmry.com/*"
],
"icons":
{
"48": "icons/border-48.png"
},
"browser_action":
{
"browser_style": true,
"default_popup": "popup/choose_length_page.html",
"default_icon":
{
"16": "icons/summarizer-icon-16.png",
"32": "icons/summarizer-icon-32.png"
}
}
"web_accessible_resources": [
"inject.html"
]
}
And, lastly, here is the top level file structure of my extension:
How can I fix this security error?
This is not a duplicate of this: Security error in Firefox WebExtension when trying getUrl image because I provided the full path in my manifest.json
I was missing a comma. Here is the relevant portion of the manifest.json with the comma in place:
"browser_action":
{
"browser_style": true,
"default_popup": "popup/choose_length_page.html",
"default_icon":
{
"16": "icons/summarizer-icon-16.png",
"32": "icons/summarizer-icon-32.png"
}
},
"web_accessible_resources": [
"inject.html"
]
This question already has an answer here:
Communicate between scripts in the background context (background script, browser action, page action, options page, etc.)
(1 answer)
Closed 5 years ago.
I'm writing up a chrome extension, with all analysis happening in my background.js. Say the result comes out from this script, in the format of a HTML table, then how can I show it in the pop up page, which is the page after the user clicks on the extension icon?
Many thanks!
This is my manifest.js
{
"manifest_version": 2,
"name": "myExtension",
"description": "...",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "lightning.png",
"default_title": "Click here!",
"default_popup": "intro.html"
},
"permissions": [
"background",
"activeTab",
"tabs",
"bookmarks",
"webRequestBlocking",
"webRequest",
"<all_urls>",
"debugger"
]
}
The idea is to keep message listener in background script, so each time popup is running it asks for a report.
That is the code:
manifest.json
{
"name": "test",
"version": "0.0.1",
"manifest_version": 2,
"description": "Test",
"background": {
"scripts": [
"background.js"
]
},
"permissions": [],
"browser_action": {
"default_popup": "popup.html"
}
}
popup.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="report"></div>
<script src="popup.js"></script>
</body>
</html>
popup.js
var reportContainer = document.querySelector('#report');
chrome.runtime.sendMessage({action: 'report'}, function (response) {
reportContainer.innerHTML = response;
});
background.js
var report = '<h1>hello from background</h1>';
chrome.runtime.onMessage.addListener(
function(data, sender, sendResponse) {
if(data.action === 'report') {
sendResponse(report);
}
}
);
There are a ton of information about this on SO and elsewhere, but I couldn't get it to work!
I have this popup.html:
<html>
<head>
<title>My popup that should display the DOM</title>
<script src="popup.js"></script>
</head>
<body>
<button id="btn">Click!</button>
<input type="text" id="info">
</body>
</html>
my manifest.json:
{
"manifest_version": 2,
"name": "Get HTML example w/ popup",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": [ "http://*/*", "https://*/*" ],
"js": ["jquery-2.2.1.min.js","content.js"]
}],
"browser_action": {
"default_icon": "icon.png",
"default_title": "Get HTML example",
"default_popup": "popup.html"
},
"permissions": ["tabs"]
}
background.js:
function doStuffWithDOM(infoHtmlText) {
alert("I received the following DOM content:\n" + infoHtmlText);
chrome.extension.getBackgroundPage().info = infoHtmlText;
}
chrome.tabs.onUpdated.addListener(function(id,changeInfo,tab){
if(changeInfo.status=='complete'){ //To send message after the webpage has loaded
chrome.tabs.sendMessage(tab.id, { status: "ok" },function(response){
infoHtmlText = $("#domElement").text();
doStuffWithDOM(infoHtmlText);
});
}
})
content.js:
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
/* If the received message has the expected format... */
if (msg.status && (msg.status == "ok")) {
/* Call the specified callback, passing
the web-pages DOM content as argument */
sendResponse("something?");
}
});
Is there a simple example, where you can click on a button in the popup and get content from the DOM and show it in the popup?
Here is a sample code based from your codes:
popup.js
function hello() {
var name = document.getElementById('info').value;
alert("Hello " +name);
}
document.getElementById('btn').addEventListener('click', hello);
popup.html
<html>
<head>
<title>My popup that should display the DOM</title>
</head>
<body>
<button id="btn">Click!</button>
<input type="text" id="info">
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
manifest.json
{
"manifest_version": 2,
"name": "Get HTML example w/ popup",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Get HTML example",
"default_popup": "popup.html"
},
"permissions": ["tabs", "<all_urls>"]
}
background.js : leave blank (not sure on this on because I'm new at chrome development) but it is working.
I got the answer from this SO question, if you directly use inline headers you will encounter this error message:
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
I want to do something that seems like it should be fairly simple, but I can't get it to work.
All I want it to do is when the button in the popup is clicked I want to log the word "Hello" to the console. At the moment nothing happens. No error message. Just nothing.
Here is my manifest.jason file
{
"name": "Content Script",
"version": "1.0",
"description": "Experiments with content scripts.",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
}
Here is my popup.html
<h1>Hello</h1>
<script>
function changeField() {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {"code": "sayHello"});
});
}
</script>
<button onclick="changeField();">Click</button>
Here is my contentscript.js
function sayHello() {
console.log("Hello");
}
chrome.extension.onRequest.addListener(
function(request, sender, response) {
if(request.code == 'sayHello') {
sayHello();
}
}
);
I've been reading the docs but they seem to skip over a lot of things. If someone could explain why this doesn't work I would be eternally grateful.
You didn't inject your content script to the page which console lives in.
Add content_scripts segment to your manifest.json file.
There is a reference of manifest.json file on chrome extension official site.
{
"name": "Content Script",
"version": "1.0",
"description": "Experiments with content scripts.",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"popup": "popup.html"
},
"content_scripts":[{
"matches":["http://*/*"],
"js":["content_script.js"]
}]
}