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.
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 new to chrome extensions and I am having trouble while writing my first extension for chrome. What I am trying to do is detect the new tab action and redirect to a pre-defined(my webpage) url.
I wrote the manifest.json and the background.html but it doesn't seem to work.
I went through the google papers on the functions and how to use them, but there must be something I've missed.
I do not understand quite a few things that I've done in here, for example the content-scripts in manifest.json.
Some help in fixing this would be appreciated.
EDIT
EDIT2
Here is the updated code
Now I don't have the background.html file.
manifest.json
{
"name": "Tabber",
"manifest_version" : 2,
"version": "1.0",
"description": "MyExtension",
"background" : {
"scripts": ["code.js"]
},
"chrome_url_overrides": {
"newtab": "code.js"
},
"permissions": [
"tabs"
]
}
code.js
<script>
chrome.browserAction.onClicked.addListener(function(tab){
var action_url = "www.xyz.com"
chrome.tabs.create({ url: action_url });
}
</script>
Now when I open a new tab, I get to see the source of the .js file displayed.
Screenshot:
Why isn't the script being executed ?
If you want to over ride a default page, you shoud use html file, not a js file.
And if you just want to over ride a page, you do not need any background page or content script.
Here is the sample code:
menifest.json:
{
"name": "Tabber",
"manifest_version" : 2,
"version": "1.0",
"description": "MyExtension",
"chrome_url_overrides": {
"newtab": "my.html"
},
"permissions": [
"tabs"
]
}
my.html:
<!DOCTYPE html>
<html>
<head>
<title>over ride page</title>
<script type="text/javascript" src="code.js">
</script>
</head>
<body>
</body>
</html>
code.js:
window.open("http://www.google.com", "_self");
Note: you can not write any js in your html file. You need to include js file in html file.
And, you even do not need any js file. just modify the my.html as this:
<head>
<meta http-equiv="refresh"content="0;URL=http://www.google.com">
</head>
With the new chrome extensions you should not put any script code in the background page.
Inline scripts and event handlers disallowed
Due to the use of Content Security Policy, you can no longer use
tags that are inline with the HTML content. These must be
moved to external JS files. In addition, inline event handlers are
also not supported. For example, suppose you had the following code in
your extension:
https://developer.chrome.com/extensions/tut_migration_to_manifest_v2.html#inline_scripts
What you should do is move your code to a js file, either set the
manifest background property to a js file or have a background page
that links to an external js file and put all you js code there...
Try using the background property: http://developer.chrome.com/extensions/background_pages.html
1)basically add to your manifest a background script (you do not need the background page for your extension right now)
background : {
"scripts": ["background.js"]
}
2) Then add a a background.js to your extension directory and put all your js code there..
Then try again, and see if the extension works :)
3) remove all html from the js file and put just you js in the background.js
chrome.browserAction.onClicked.addListener(function(tab){
var action_url = "www.xyz.com"
chrome.tabs.create({ url: action_url });
}
Add this guy to your manifest.json file.
"chrome_url_overrides": {
"newtab": "index.html"
}
with index.html being replaced with your page. This will make it so it will show index.html when you open a new tab instead of the default.
I have an extension that basically does the same thing. Here's my manifest.json that you can use as a reference.
{
"name": "appName",
"version": "0.1",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"
},
"description": "Desc Here",
"icons": {
// "128": "icon128.png"
},
"content_scripts": [ {
"css": ["css/styles.css"],
"js": [ ],
"matches": [ "*://*/*" ],
"run_at": "document_start"
} ],
"minimum_chrome_version": "18",
"permissions": [ "http://*/*", "https://*/*", "cookies", "tabs", "notifications" ]
}
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
}
});
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.
When the chrome.tabs.create function is triggered by a message received, it creates 2 tabs. In the following demo code, 1 cat tab is created, and 2 dog tabs are created.
Is this by design or is it a bug? If it is a known bug, can you provide the bug id so I can track its progress? How can I avoid 2 duplicate tabs being created?
The debug console contains the following output, so in fact the duplicate tab is also getting the content script injected even though only one call to secondaryTabCreationCallback_ is printed in the debug output!!!!
Creating secondary tab
Created secondary tab: 11968
Kill request from tab: 11966
Kill request from tab: 11968
background.js
var handler = {
url1_: 'https://www.google.com/?gws_rd=ssl#q=cat',
url2_: 'https://www.google.com/?gws_rd=ssl#q=dog',
windowId_: chrome.windows.WINDOW_ID_CURRENT,
createPrimaryTab: function() {
chrome.tabs.create(
{'url': handler.url1_, 'active': false, 'windowId': handler.windowId_},
handler.primaryTabCreationCallback_);
},
primaryTabCreationCallback_: function(tab) {
chrome.tabs.executeScript(tab.id, {file: "content_script.js"});
},
createSecondaryTab_: function() {
console.log("Creating secondary tab");
chrome.tabs.create(
{'url': handler.url2_, 'active': false, 'windowId': handler.windowId_},
handler.secondaryTabCreationCallback_);
},
secondaryTabCreationCallback_: function(tab) {
console.log("Created secondary tab: " + tab.id);
chrome.tabs.executeScript(tab.id, {file: "content_script2.js"});
},
};
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
switch (message.type) {
case "CREATE_TAB":
handler.createSecondaryTab_();
break;
case "KILL_ME":
console.log("Kill request from tab: " + sender.tab.id);
// chrome.tabs.remove(sender.tab.id);
break;
default:
alert("Not Reached");
break;
}
});
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': chrome.extension.getURL('background.html')});
});
window.onload = function() {
document.getElementById("start_button").onclick = handler.createPrimaryTab;
}
content_script.js
chrome.runtime.sendMessage({type: "CREATE_TAB"});
content_script2.js
chrome.runtime.sendMessage({type: "KILL_ME"});
background.html
<!doctype html>
<html>
<head>
<script src="background.js"></script>
</head>
<body>
<div>
<input type="button" id="start_button" value="Start">
</div>
</body>
</html>
manifest.json
{
"manifest_version": 2,
"name": "Tab Bug",
"description": "Demonstrates bug in chrome.tabs.create.",
"version": "1.0",
"permissions": [
"activeTab",
"nativeMessaging",
"tabs",
"https://www.google.com/"
],
"icons": { "128": "icon128.png" },
"browser_action": {
"default_icon": "icon19.png"
},
"background": {
"page": "background.html"
}
}
The issue is that there are 2 "background" pages running.
The official background page specified in the manifest file.
The tab created by chrome.tabs.create({'url':
chrome.extension.getURL('background.html')}).
This means there are 2 message listeners, which is why 2 tabs are opening.
The console messages from the official manifest.json background can be found by looking at extension on the chrome extensions page and click on the "Inspect views: background.html". Which shows:
Creating secondary tab
Created secondary tab: 11966
Kill request from tab: 11966
Kill request from tab: 11968
To work around this issue. The manifest.json background file can point to a script "starter.js" instead of an html page, which simply has the following javascript:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': chrome.extension.getURL('background.html')});
});
My background.js is very simple.
chrome.browserAction.onClicked.addListener(() => {
chrome.tabs.create({
url: chrome.runtime.getURL('popup.html'),
})
})
manifest.json
"background": {
"persistent": false,
"scripts": [
"background.js"
]
},
Tried to disable/enable the extension (so that chrome destroys all the background pages from this extension) but it still opens duplicate tabs!!
So the problem might be there is someone that included the background.js. And guess what! It's popup.html.
The root cause is HtmlWebpackPlugin from webpack.config.js. It defaults to include all chunks (including background).
So we just exclude the background chunk from popup.html config then it should work as expected.
new HtmlWebpackPlugin({
template: 'public/popup.html',
filename: 'popup.html',
excludeChunks: ['background'],
}),