I would like to create a chrome extension that open my website on homepage / new tab. I used the HTML tag <meta http-equiv.. to redirect the user to my website and it working great.
The problem is that I want to pass parameter (create unique ID for each user) and to attach this parameter to my website URL:
for example: http://www.mywebsite.com/?user_id=parameter_value_here
where I should create my user id?
how I pass it to the new tab html file?
My extension code:
newTab.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=http://www.mywebsite.com/?user_id=value_here" />
</head>
<body style="display: none;">
</body>
</html>
Manifest
{
"name": "My website name",
"version": "1.1",
"description": "website description goes here",
"chrome_url_overrides" : {
"newtab": "newTab.html"
},
"permissions": [
"topSites",
"chrome://favicon/"
],
"manifest_version": 2,
"permissions":[
"http://*/*",
"https://*/*",
"management",
"storage",
"tabs",
"webRequest",
"webRequestBlocking",
"cookies",
"bookmarks"
]
}
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 was trying out this webextension-polyfill example to executeScript using tabs.executeScript and I get an error message:
Uncaught(in promise) Failed to load file: "browser-polyfill.js"
This is the example code I am referring to:
browser.tabs.executeScript({file: "browser-polyfill.js"});
https://github.com/mozilla/webextension-polyfill
The same goes for the other example where I try to use browser-polyfill in the content script like:
"content_scripts": [{
// ...
"js": [
"browser-polyfill.js",
"content.js"
]
}]
I get the error message: Could not load javascript "browser-polyfill.js" for content script. Could not load manifest
It works in background script though and also in popup html.
Here is my manifest file
{
"name": "Dummy",
"author": "UI Team at Dummy",
"version": "1.0.0",
"manifest_version": 2,
"description": "Vera browser extension",
"permissions": [
"storage",
"webRequest",
"tabs",
"webRequestBlocking",
"storage",
"*://*/*",
"declarativeContent"
],
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/extension_icon16.png",
"32": "images/extension_icon32.png"
}
},
"background": {
"scripts": ["background-proprietary.js", "background.js"]
},
"content_scripts": [
{
"matches": ["https://*.box.com/*"],
"js": ["content-script-box.js"],
"all_frames": true
},
{
"matches": ["https://*/*"],
"include_globs": ["*DummyExtensionFlow=1*"],
"js": ["browser-polyfill.js","config-sharepoint.js"],
"all_frames": true
}
],
"icons": {
"16": "images/extension_icon16.png",
"32": "images/extension_icon32.png",
"48": "images/extension_icon48.png",
"128": "images/extension_icon128.png"
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
Here is my popup html file which is working with webextension polyfill
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./popup.css">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="application/javascript" src="browser-polyfill.js"></script>
<script type="text/javascript" src="./popup.js"></script>
</body>
</html>
What am I doing wrong?
Found a satisfying solution from the same tutorial.
var browser = require("webextension-polyfill");
This works for me!
The document said that after you've installed the package by npm install --save-dev, You will find that file at node_modules/webextension-polyfill/dist/browser-polyfill.js. All you have to do is copy that file to your project directory.
You can also use the minified version for better load speed
webextension-polyfill
I'm trying to create a chrome extension, so I'm doing tutorials to learn and reading a bunch, but I'm struggling. I'm doing this tutorial. But long-term, from the extension I need users to be able to login to their account, then as they're browsing, send the url that they're at to their account.
popup.html
<!doctype html>
<html>
<head>
<title>Add a Snippet</title>
<script src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<h1>Add a Snippet</h1>
<form id="form">
<textarea id="code"></textarea>
<button type="submit" id="checkPage">Add Snippet</button>
</form>
</body>
</html>
popup.js
What I REALLY don't understand is that according to the console.log lines that I have in there and the error, it's loading the DOMContent, and it doesn't have any problem with finding the form by the id (let f = document.getElementById('form');). But it bombs when I try to attach an event listener?
document.addEventListener('DOMContentLoaded', function() {
console.log('the domcontentloaded');
let f = document.getElementById('form');
f.addEventListener('submit', function(e){
console.log('the form was submitted');
e.preventDefault();
})
}, false);
manifest.json
{
"name": "My Awesome Plugin",
"description": "This extension will be awesome",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "This is Awesome"
},
"background": {
"scripts": ["jquery-2.2.3.min.js", "background.js","popup.js"],
"persistent": false
},
"permissions": [
"activeTab",
"declarativeContent",
"https://ajax.googleapis.com/",
"storage",
"tabs",
"http://*/*",
"https://*/*"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["login.js"]
}
],
"manifest_version": 2
}
login.js
console.log('login.js is ready to party');
When I load, I get this in the background inspector (or whatever it's called). So it's not finding the form.
So I looked at the elements, and I'm confused because it's not showing the form or the textarea. But when I click on the chrome extension icon, it's there.
1/Remove popup.js from "background/scripts" section of your manifest.
2/Add popup.js as a script reference in your popup.html file.
This way, popup.js will operate in the context of the popup.html DOM.
I'm working on building a Chrome extension for a forum, but the problem is the JavaScript for my popup.html won't do anything. I added alert("popup.js running...") at the top and it does come up but then my popup doesn't display at all. This is a problem because JavaScript is going to be required for the popup page. I'm kind of lost, so I'm assuming I'm just missing something that is preventing my JavaScript from running. I heard the AdBlock extension would prevent it from running but I removed that and it still didn't work. Anyone see a problem?
manifest.json
{
"name": "Riggy",
"short_name": "Riggy",
"description": "Create your own Roblox Forum signature with Riggy!",
"version": "0.0.1",
"manifest_version": 2,
"browser_action": {
"default_popup": "popup/popup.html"
},
"permissions": [
"storage"
],
"content_scripts": [
{
"matches": ["http://www.roblox.com/*"],
"js": ["scripts/jquery.js", "scripts/content.js"]
}
]
}
popup.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="popup.css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
</head>
<body>
<span class="title">Riggy</span><br />
<span>Signature: </span><input name="siggy" id="siggy" value="Riggy is greatness!" />
<span id="output">[output]</span>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
popup.js
alert("popup.js running");
$(document).on("ready", function() {
var siggy = $("#siggy");
var output = $("#output");
function message(text) {
output.html(text);
}
siggy.change(function() {
chrome.storage.sync.set({"siggy": siggy.val()}, function() {
message("Saved signature.");
});
});
message("Riggy is ready!");
});
I had the same exact problem with an extension of mine, I believe it was fixed after I added this to the manifest file.
manifest.json
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
More info here: http://developer.chrome.com/extensions/contentSecurityPolicy.html.
I wants to create an extension where content script will send message to background page and then on browser action means clicking on extension icon will access that background page and get some data.I am using chrome Version 23.0.1271.64 m on windows8.
I am getting following error.
Port error: Could not establish connection. Receiving end does not exist.
I tried to solve the same. but people are using sendRequest which is not supported by chrome20+. i also found solution mentioned for chrome 20+. But not working. Please help.
Below is the file contents.
manifest.json
{
"name": "Test Extension",
"version": "1.0",
"manifest_version": 2,
"description": "A test extension.",
"background": "background.html",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery.js","content.js"]
}
],
"permissions": ["tabs", "http://*/", "https://*/"],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
background.html
<html>
<head>
<script src="background.js"></script>
</head>
<body>
<h1>Wy</h1>
</body>
</html>
background.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
// Chrome 20+
alert(request);
console.log('received in listener');
sendResponse({farewell: "goodbye"});
});
content.js
$(function(){
console.log('start-sending message');
chrome.extension.sendMessage({greeting: "hello"},function(response){alert(response);});
console.log('end-sending message');
});
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
</style>
<!-- JavaScript and HTML must be in separate files for security. -->
<script src="jquery.js"></script>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
popup.js
$(function(){
var str_html = "<tr><td width='60%'>S</td><td width='40%'>15</td></tr><tr><td width='60%'>M</td><td width='40%'>25</td></tr>";
$('#sizes_container').html(str_html);
var bkg = chrome.extension.getBackgroundPage();
console.log(bkg);
});
You're incorrectly mixing the deprecated "background_page" property with the new signature of "background". The correct way to use background pages is:
"background": {
"scripts": ["background.js"]
}
You can completely get rid off your background.html, because it serves no purpose (the content of your <body> is unused) (if you really need it, use "background": {"page": "background.html"}).
About sendRequest, it is indeed deprecated, but not removed (yet).
Regarding your popup page: You don't have any element with ID sizes_container, so you will obviously not see any output.