I want to display a Amazon Affiliate Widget Code in the popup section of a chrome extension.
The manifest.json looks like this(Copied as it is from Google Repository):
{
"manifest_version": 2,
"name": "Getting started example",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
]
}
The backgroung.js is blank.
The Popup.html looks like this:
<html>
<head>
<title>
Amazon
</title>
</head>
<body>
<h1>Amazon Search</h1>
<script charset="utf-8" type="text/javascript">
amzn_assoc_ad_type = "responsive_search_widget";
amzn_assoc_tracking_id = "smart0e-21";
amzn_assoc_marketplace = "amazon";
amzn_assoc_region = "IN";
amzn_assoc_placement = "";
amzn_assoc_search_type = "search_widget";
amzn_assoc_width = "auto";
amzn_assoc_height = "auto";
amzn_assoc_default_search_category = "";
amzn_assoc_default_search_key = "";
amzn_assoc_theme = "light";
amzn_assoc_bg_color = "FFFFFF";
</script>
<script src="//z-in.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&MarketPlace=IN"></script>
</body>
</html>
I am new to this extension development and also new to HTML.
Please help me, I want to run the search widget in the popup.
This is what happens when I click on the Extension.
http://i.stack.imgur.com/V3gK2.png
Thanks.
You can't link to external links in the popup.html file. Instead, you should add a separate javascript file to your extension's background and call the widget's script from there.
Your manifest will look something like this (don't forget to add Content-Security-Policy rules):
{
"manifest_version": 2,
"name": "Getting started example",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background" : {
"scripts" : [ "background.js" ],
},
"content_security_policy" : "script-src 'self' 'unsafe-eval' http://z-in.amazon-adsystem.com; object-src 'self'",
"permissions": [
"activeTab",
"https://ajax.googleapis.com/",
"http://z-in.amazon-adsystem.com/"
]
}
Your background.js file can call the script in an iframe:
(function() {
var widget = document.createElement('iframe');
widget.src = "//z-in.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1&MarketPlace=IN";
widget.id = 'widget';
document.body.appendChild(widget);
//assign your widget variables
})();
And your popup.html can just have a script link to your background file:
<script type="text/javascript" src="../background.js"></script>
I haven't tested this, but it's the general gist of how to run external scripts in your extension.
Related
I got the extension to add "dev." to the current URL in a new tab which is working through a pop-up.
I'm trying to disable/remove the pop-up so that the code will work only when pressing the extension button instead.
popup.js:
document.addEventListener("DOMContentLoaded", function() {
console.log("Extension button clicked!");
var button = document.getElementById("change-url");
button.addEventListener("click", function() {
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
var url = new URL(tabs[0].url);
url.hostname = "dev." + url.hostname;
chrome.tabs.create({ url: url.toString() });
});
});
});
manifest.json:
{
"name": "My URL Changer",
"version": "1.0",
"manifest_version": 3,
"permissions": ["scripting"],
"host_permissions": ["<all_urls>"],
"action": {
"default_popup": "popup.html",
"default_title": "My URL Changer"
}
}
popup.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My URL Changer</title>
<script src="popup.js"></script>
</head>
<body>
<h1>My URL Changer</h1>
<button id="change-url">Change URL</button>
</body>
</html>
As woxxom mentioned, the chrome.action.onClicked API is a good fit for this.
The event does not fire if the extension has a popup, so you'll want to remove the default_popup key. However, you'll need to keep the empty action object. This tells Chrome to show an icon for your extension and is also required to make the API available.
With those changes in mind, your manifest would look like this:
{
"name": "My URL Changer",
"version": "1.0",
"manifest_version": 3,
"permissions": [
"scripting"
],
"host_permissions": [
"<all_urls>"
],
"action": {}
}
You should also consider removing <all_urls> and replacing it with just the domains you want your extension to run on, since it's always best to request just the access you need. You could also remove this key entirely and use the activeTab permission instead, which gives your extension access to pages only when the action icon is clicked.
You'll then need to declare a service worker by adding the following to your manifest:
"background": {
"service_worker": "worker.js"
}
And in worker.js, you can copy your code from popup.js making sure to use the action API instead of DOMContentLoaded.
I am trying to make a form filler chrome extension, and I am getting no errors when it interact with the extension, but when I click the button on the chrome extension fields on the job application form are still not getting filled in.
manifest-
{
"name": "Jabord",
"version": "1.0",
"manifest_version": 2,
"description": "Fill forms",
"content_scripts": [{
"matches" :
["https://boards.greenhouse.io/vimeo/jobs/1837092"],
"js" : ["popup.js"]
}],
"browser_action": {
"default_popup": "popup.html",
"default_icon" : "download.png"
}
}
popup.html-
<html>
<body>
<button type="button" id="fill">Fill</button><br>
<script src="popup.js"></script>
<body>
</html>
popup.js-
document.getElementById("fill").onclick = Fill;
function Fill(){
document.getElementById("first_name").innerHTML =
"somefirstname";
}
Hi I'm doing a exercise in which I have to capture the content of a "p" tag inside on any page and show by "alert"
manifest.json
{
"manifest_version": 2,
"name": "Get text",
"description": "Get text",
"version": "1.0",
"browser_action": {
"default_title": "Get text"
},
"background": {
"page": "background.html"
},
"permissions": [
"tabs",
"activeTab"
]
}
background.html
<div>BLA BLA BLA</div>
<p> p tag </p>
<script src="jquery-3.3.1.js"></script>
<script src="background.js"></script>
here I check that I was capturing the elements of this html page instead of the page opened in the tab
background.js
chrome.browserAction.onClicked.addListener(function() {
alert("Text: " + $("p").text());
});
I'd tried to do in the easiest way, I'd been reading numerous post with a lot of diferents methods but none of them works
Try this in your background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {
code: "alert(document.querySelector('p').innerText)"
});
});
You need to run the script in context of the current tab. To do that you have to use chrome.tabs.executeScript. You can also specify a file to run instead of code. Checkout the documentation.
I am making a chrome extension. I need to run a js script when the popup opens. How can I do that from background.js?
I am almost sure that this has already been asked and answered here, but it was easier to write it again than to find the existing question. You need to use message passing.
manifest.json
{
"manifest_version": 2,
"name": "My extension",
"description": "Start action in background from popup.",
"version": "1.0",
"browser_action": {
"default_title": "My extension",
"default_popup": "popup.html"
},
"background": {
"scripts": ["event.js"]
}
}
popup.html
<!DOCTYPE html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<p>Background page has been notified</p>
</body>
</html>
popup.js
chrome.runtime.sendMessage({text: "popup opened"});
event.js
chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
if (message.text == "popup opened") {
console.log ("Popup says it was opened.");
// Run your script from here
}
});
Thanks for taking the time to read this.
Here is the directory of my extension folder.
And here is the manifest code :
{
"manifest_version": 2,
"name": "Technobuffalo Stories",
"description": "Your Description about Extension goes here",
"version": "1.0",
"content_scripts": [ {
"js": [ "popup.js" ],
"matches": [ "http://feeds.feedburner.com/*" ]
} ],
"permissions": [ "http://feeds.feedburner.com/*" ],
"browser_action": {
"default_icon": "icon_16.jpeg",
"default_popup": "popup.html"
}
}
Here is popup.html :
<html>
<head>
<title>Technobuffalo Stories
</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="popup.js"></script>
</head>
<body>
<div id="feed" style="background-color:orange;height:500px;width:500px;" ></div>
</body>
</html>
and last of all here is popup.js :
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://feeds.feedburner.com/technobuffalo/rss?format=xml");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
When I open the popup.html file as it is, the required result is displayed but when I load the Chrome extension, only the background color of the div can be seen. Is there any problem with the permissions that I have set or is it something else?
Thanks,
Yash.
You have to add the following line to manifest.json to be able to use resources from www.google.com:
"content_security_policy": "script-src 'self' https://www.google.com; object-src 'self'"
As Rob W already pointed out this is a security feature that has been introduced with manifest version 2.