I programmed a chrome extension that works well (get cookie info on a specific page, fetch data and print in a textarea of my popup). But after add other checks, my popup stop printing my data.
I try to search why and I discover that my popup refresh as soon as my code ends. To test, I just code the below simple files and I still have the issue.
Just after installation, when I open my popup, I can see the "background" text in console log correctly. Good point.
But when I click on the button, I quickly see the text "test" in the console log but the popup immediately refresh then the console reset information and my button back again instead to stay invisible.
I don't know why the popup refresh when it did not do so before. Do you have an idea ? Is there something I do not understand ?
Thank you for your help.
Manifest.json
{
"manifest_version": 3,
"name": "Test extention",
"description": "Test extension",
"version": "1.0",
"icons": {
"16": "./img/icon_16.png",
"32": "./img/icon_32.png",
"48": "./img/icon_48.png",
"64": "./img/icon_64.png",
"128": "./img/icon_128.png"
},
"background": {
"service_worker": "./background.js"
},
"action": {
"default_popup": "./popup.html",
"default_title": "Test Extention",
"default_icon": {
"16": "img/icon_16.png",
"32": "img/icon_32.png",
"48": "./img/icon_48.png",
"64": "img/icon_64.png",
"128": "img/icon_128.png"
}
},
"permissions": [
"declarativeContent",
"storage",
"cookies",
"tabs",
"activeTab",
"scripting"
]
}
background.js
console.log("background");
popup.js
const startOfScript = () => {
optionsForm.startlabel.style.display = "none";
console.log("test");
};
optionsForm.startlabel.addEventListener("click", startOfScript);
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container">
<p class="title">Fred's AI Marketing extention</p>
<form id="optionsForm">
<button id="startlabel">Récupérer les données</button>
</form>
<script src="./popup.js"></script>
</div>
</body>
</html>
Answer (Thank you #wOxxOm)
Just remove the <form> in popup.html
This node will automatically refresh the form and the popup at the same time.
Related
I've copied the code from a tutorial and I think I might be missing a new addition.
This is inside of my popup.js file which is linked correctly in my popup.html file. The goal here is to have a budget tracker that adds the input to the 'total' id.
Here is the code I am working with inside of popup.js
$(function() {
$('#spendAmount').click(function() {
chrome.storage.sync.get('total', function(budget) {
var newTotal = 0;
if (budget.total) {
newTotal += parseInt(budget.total);
}
var amount = $('#amount').val();
if (amount) {
newTotal += parseInt(amount);
}
chrome.storage.sync.set({
'total': newTotal
});
$('#total').text(newTotal);
$('#amount').val('');
});
});
});
<!DOCTYPE html>
<html>
<head>
<title>Budget Manager</title>
<script type="text/javascript" src="popup.js"></script>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>Budget Manager</h1>
<h2>Total Spent: <span id="total">0</span></h2>
<h2>Limit: <span id="limit"></span></h2>
<h3>Enter Amount</h3>
<input type="text" id="amount" />
<input type="submit" id="spendAmount" value="Spend">
</body>
</html>
manifest.json
{
"manifest_version": 2,
"name": "Budget Manager",
"version": "1.0",
"description": "This extension tracks your overall spendings.",
"icons": {
"128": "icon128.png",
"48": "icon48.png",
"16": "icon16.png"
},
"browser_action": {
"default_icon": "icon16.png",
"default_popup": "popup.html"
},
"permissions": [
"storage"
]
}
You are loading jQuery after your script. When your script is executed there is no jQuery, So $ is not defined at that time.
Move popup below jQuery
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
The reason for this is that the script calling for jQuery loads prior to jQuery.js loading.
fix = having the background script load jQuery itself
or
Try changing JQuery to its minimized version - in some cases it has shown success.
Content scripts are reloaded automatically but changes to manifest.json only become effective after reloading your Chrome extension.
I have the following code for a Chrome extension
Manifest.json:
{
"name": "Popup_DB",
"version": "0.0.1",
"manifest_version": 2,
"description": "random",
"browser_action": {
"default_title": "Alt+C for opening",
"default_popup": "hello.html"
},
"commands": {
"_execute_browser_action": {
"suggested_key": {
"windows": "Alt+C"
}
}
},
"permissions": [
"*://*/*",
"tabs"
]
}
Hello.html:
<html>
<head>
<style type="text/css">
body {width:780; height:580;}
</style>
</head>
<body>
<iframe src= "https://www.bing.com/" width="100%" height="100%" frameborder="0" id="MyFrame">
</iframe>
</body>
</html>
The website I have mentioned in iframe is a keepsake. Basically, within the popup window, I want to open a page in which all 'Go' links force opening a page in the new tab forcing the popup to close.
Is there a way to edit HTML code so that nothing opens in a new tab so that I can basically do picture-in-picture?
I have tried to create an extension for chrome that captures the screen. But I found an issue (in my opinion). chooseDesktopMedia shows the dialogue for choosing the screen and hides it immediately.
manifest.json:
{
"manifest_version": 2,
"name": "desktopCapture",
"description": "User testing application",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"desktopCapture"
]
}
popup.js
document.querySelector('#start').addEventListener('click', function(event) {
chrome.desktopCapture.chooseDesktopMedia(
["screen", "window"],
function(id) {
console.log("id",id);
});
});
popup.html
<!DOCTYPE html>
<html>
<head>
<title>Desktop capture</title>
</head>
<body>
<button id="start">Start</button>
<script src="popup.js"></script>
</body>
</html>
I'm trying to dip my feet into the water of the pool that is creating chrome extensions. I tried to start off with something I thought would be simple but it has proven to stump me as I don't really know where I can read information on this sort of thing.
Anyhow, currently my goal is to have a chrome extension that does the following:
You click the extension icon -> an HTML popup file opens displaying a singular button -> when you click this button it opens a specified link in a new chrome tab and changes that to be your active tab.
From my searching, I have found that I might have to use a background script so that I don't violate a policy regarding Manifest version 2 or something of the sorts, I tried it and it didn't really work for me. I really don't want to wander into creating a whole new script if that's not the problem.
Here's my manifest.json file followed by my popup.html file.
{
"manifest_version": 2,
"name": "strong text",
"author": "authorname",
"description": "desctext",
"version": "1.4",
"permissions": [
"tabs"
],
"icons": { "16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" },
"browser_action": {
"default_popup": "popup.html"
}
}
<!doctype html>
<html>
<head>
<title>Hovertext</title>
<script src="popup.js"></script>
</head>
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="divider">
<p><button type="button" id="buttonA">Button Text</button>
<script>
var button1 = document.getElementById("buttonA");
button1.addEventListener("click", function() {
chrome.tabs.create({url: "http://www.google.com/"});
});
</script>
</div>
<div id="footer">
footer stuff here
</div>
</body>
<style>
body {
background-image: url("https://s-media-cache-ak0.pinimg.com/736x/51/3e/4f/513e4f5274ec48f29b894b0b8409658f.jpg");
}
#header {
background-color:rgb(96, 222, 72);
text-align:center;
padding:1px;
}
#footer {
background-color:rgb(96, 222, 72);
clear:both;
text-align:center;
padding:1px;
}
#divider {
text-align:center;
}
#buttonA {
color:white;
background-color:rgb(0, 152, 255);
border-width:3px;
border-color:white;
}
#buttonA:hover {
color:rgb(0, 152, 255);
background-color:white;
border-width:3px
border-color:rgb(0, 152, 255);
}
</style>
</html>
I'm new to this type of stuff and stack-overflow in general so if I didn't clarify something correctly just let me know, Thanks for the help in advance!
A simple code to open new tab on click some button. Try to use it on your extension.
manifest.json:
{
"name": "Test",
"version": "1.1",
"description":
"Description",
"permissions": [
"notifications",
"fontSettings"
],
"options_page": "options.html",
"manifest_version": 2
}
option.html:
<!doctype html>
<html>
<head>
<title>Demo</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="options.js"></script>
</head>
<body>
<input type="button" id="btnOpenNewTab" value="Click to open new tab"/>
</body>
</html>
option.js:
window.addEventListener('DOMContentLoaded', function() {
// your button here
var link = document.getElementById('btnOpenNewTab');
// onClick's logic below:
link.addEventListener('click', function() {
var newURL = "http://stackoverflow.com/";
chrome.tabs.create({ url: newURL });
});
});
You use this source code for your popup's button
window.opener.open("http://www.google.com/");
Its possible to create an Action in popup.html ?
To simplify, when the user click on the button, move to a 'new' popup.html..
I'm trying to create a menu using buttons to indicate Autors and when clicked result informations about the autors.
Follow my project so far..
manifest.json
{
"manifest_version": 2,
"name": "Autors info",
"version": "1.0",
"description": "123",
"browser_action":{
"default_popup": "popup.html"
},
"icons": {
"16": "icon16.png"
}
}
popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html, body {
width: 500px;
background-color: #ADD8E6;
}
</style>
</head>
<body>
<h1>Info Autors</h1>
<h3>Click bellow to check autors story:</h3>
<button type="button" id="create">JRR Tolken</button>
</body>
</html>