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>
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 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"
}
}
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/");
I am trying to create a very simple chrome extension that open multiple tabs of LinkedIn searching different keywords that I type in.
Since this is my first extension, most of my codes are based on this extension, which is very similar to my idea.
The problem is when I click my "search" button, nothing happens. I just started coding for a week so I'd greatly appreciate any help!
Besides knowing what is wrong with the codes, is a background script necessary in this case?
Thanks!
Here are my codes:
Manifest.json
{
"manifest_version": 2,
"name": "Search Assistant",
"description": "This extension makes LinkedIn Search easy.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["myscript.js"]
}
],
"chrome_url_overrides" : {
"newtab": "newtab.html"
},
"background": {
"scripts": ["bg.js"]
}
}
Popup.html
<!doctype html>
<head>
<style type="text/css">
body{
font family: Helvetica, Arial, sans;
font-size: 12px;
}
#instruction{
padding-bottom: 10px;
}
#searcharea{
padding-bottom: 10px;
}
#search{
padding-bottom: 10px;
float: left;
}
#companies{
white-space: nowrap;
overflow:auto;
}
</style>
<style type="text/javascript" src="popup.js"></style>
</head>
<body>
<div id="instruction">Companies you want to search for:</div>
<div id="searcharea"><textarea rows="20" cols="80" id="companies" wrap="soft" tabindex="1"></textarea></div>
<div id="search">
<button id="btn1" tabindex="2">Search</button>
</div>
<p id="demo"></p>
</body>
</html>
Popup.js
document.addEventListener('DOMContentLoaded', function (){
document.getElementById('btn1').addEventListener('click', loadSites);
document.getElementById('companies').focus();
});
function loadSites(e){
var companies = document.getElementById('companies').value.split('\n');
for(var i=0; i<companies.length; i++){
thecompany = companies[i].trim();
thesearchurl = 'https://www.linkedin.com/vsearch/c?type=companies&keywords=' + thecompany;
chrome.extension.create({url: thesearchurl, selected:false})
}
}
You have 2 slight errors right now. Firstly you should use script-tag instead of style to include javascript files. Second: it is better to load javascript after your page is ready. To fix these follow steps below
Remove line <style type="text/javascript" src="popup.js"></style>
Add this <script type="text/javascript" src="popup.js"></script> to a line right before </body>.