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>
Related
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.
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 am trying to load a page that will search the domain of your current tab into this url: "https://www.owler.com/iaApp/browsecompanyprofiles.htm?searchTerm=" + window.location.hostname.
It works in Editors I have used online like JSbin, etc but whenever I upload it into google, it is a blank white pop up. What Im I missing. I know that I shouldn't have script in my popup.html so I created a seperate file but it still isn't working.
This is my js and html file.
function newDoc() {
window.location.assign("https://www.owler.com/iaApp/browsecompanyprofiles.htm?searchTerm=" + window.location.hostname)
}
document.addEventListener('DOMContentLoaded', function() {
newDoc();
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script id="jsbin-javascript">
function newDoc() {
window.location.assign("https://www.owler.com/iaApp/browsecompanyprofiles.htm?searchTerm=" + window.location.hostname)
}
document.addEventListener('DOMContentLoaded', function() {
newDoc();
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">function newDoc() {
window.location.assign("https://www.owler.com/iaApp/browsecompanyprofiles.htm?searchTerm=" + window.location.hostname)
}
document.addEventListener('DOMContentLoaded', function() {
newDoc();
});
</script></body>
</html>
<style>
html, body{
width: 350px;
height: 600px;
border: none;
margin: 0px;
padding: 0px;
}
</style>
mainfest.json:
{
"manifest_version": 2,
"name": "Owler",
"description": "Pull company information from any URL",
"version": "1.0",
"icons": {
"48": "icon-48.png",
"128": "icon-100.png"
},
"permissions": [
"activeTab", "tabs", "<all_urls>"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
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>