I am trying to get data from a tab opened with chrome extension. So far my extension can open a new tab with the correct link, but I'm having trouble getting content.js to respond to click on the submit button in my popup window. My entire code is below. I would really appreciate any help.
popup.js
$(document).ready(function(){
function d(c){
console.log(c)
}
$('#rt').click(function(){
var mov = $('input:text').val()
//open new link with movie title name
var movUpdate = mov.replace(/ /g,'_')
var link = "http://www.rottentomatoes.com/m/" + movUpdate
chrome.tabs.create({"url":link,"selected":false},function(tab){
chrome.tabs.sendMessage(tab.id,{"message":"clicked_submit"})
d(tab.id)
})
})
})
This is my content-js, it is not logging 'popup message'
function d(c){
console.log(c)
}
chrome.runtime.onMessage.addListener(
function(request,sender,sendResponse){
if(request.message==='clicked_submit'){
//find the rottentomato scores
d('popup message')
}
});
popup.html
<!DOCTYPE html>
<script src="jquery-3.1.1.min.js"></script>
<script src="popup.js"></script>
Search RT for Movie: <input type="text" value=""><input type="submit" id="rt">
</div>
manifest.json
{
"manifest_version":2,
"name":"extension",
"version":"0.1",
"content_scripts":[
{
"matches": [
"<all_urls>"
],
"js":["content.js"]
}],
"browser_action":{
"default_icon":"icon.png",
"default_popup":"popup.html"
}
,
"background":{
"scripts":["background.js"]
},
"permissions":[
"tabs"
]
}
Using chrome browser's storage, I figured out how to transfer data between tabs. Content.js scrapes for ratings on the newly opened Rotten Tomatoes tab, stores them using chrome.storage.local.set for popup.js to access and display on the active tab.
popup.js
$(document).ready(function(){
function d(c){
console.log(c)
}
$('#rt').click(function(){
var mov = $('input:text').val()
//open new link with movie title name
var movUpdate = mov.replace(/ /g,'_')
var link = "http://www.rottentomatoes.com/m/" + movUpdate
chrome.tabs.create({"url":link,"active":false})
})
chrome.storage.onChanged.addListener(function(changes, areaName) { //updates the ratings
// Do whatever you want with the changes.
console.log('changed!')
chrome.storage.local.get("keyName",function(items) {
console.log(items)
console.log(items.keyName)
var criticsscore = items.keyName[0]
var audiencescore = items.keyName[1]
$('#criticsscore').html('Critics ' + criticsscore)
$('#audiencescore').html('Audience ' + audiencescore)
$('#title').html(items.keyName[2])
// Do something with items.keyName
});
});
chrome.storage.local.get("keyName",function(items) {//initialize the application
console.log(items)
console.log(items.keyName)
var critics = items.keyName[0]
var people = items.keyName[1]
$('#criticsscore').html('Critics ' + critics)
$('#audiencescore').html('Audience ' + people)
$('#title').html(items.keyName[2])
// Do something with items.keyName
});
})
content.js
var ratings = document.getElementsByClassName("meter-value")
var critics = ratings[0].innerText
var audienceIndex = ratings.length - 1
var audience = ratings[audienceIndex].innerText
var title = document.getElementById("movie-title").innerText
chrome.storage.local.set({"keyName": [critics,audience,title]},function(){console.log('mah critics stored')});
popup.html
<!DOCTYPE html>
<script src="jquery-3.1.1.min.js"></script>
<script src="popup.js"></script>
<style>
body{
background-color: red;
color:white;
}
input {
margin: 2px;
}
</style>
Search RT for Movie: <input type="text" value=""><input type="submit" id="rt">
<h1 id="title"></h1>
<h3 id="criticsscore"></h3>
<h3 id="audiencescore"></h3>
</div>
Related
I'm new to stackoverflow and even new to programming. I just started to learn to progam online and I am trying to make my first google extension.
(but because I am a complete newbie the code might also look terrible - and not efficient)
I want to make a google extension that hides/shows certain threads on a forum (related to facebook, instagram, twitter, ...) based on the values of check boxes in the popup.html of the google extension.
I have most of the code working.
If you click the google extension a pop up is shown and check boxes can be set. After hitting the 'instellingen bewaren' button these settings are saved to chrome.storage and implemented.
Also when you are on the forum and click the chrome extension the filtering of the threads is done based on your last settings.
The problem I have is that I want the filtering to be done alread when the forum page is loaded. I now always have to click the chrome extension icon to start the filtering. If I go to another page on the forum I need to click the extension again to start filtering again.
I have a feeling that all the things I am trying are resulting in the code to be executed after loading the popup.html instead of loading the forum page (at least that is what I conclude when I look at the console of both pages and perform some console.log commands).
Things I tried:
making a background.js file and using the command (also updated the manifest.json file): chrome.tabs.onUpdated.addListener
placing this in my content.js file:
document.addEventListener("DOMContentLoaded", filter);
or
chrome.tabs.onUpdated.addListener
or
window.
This is the current code:
manifest.json
{
"manifest_version": 2,
"name": " Schifters tool",
"permissions": [ "tabs", "activeTab", "storage" ],
"version": "0.1",
"icons": {
"128": "images/S-128.png",
"16": "images/S-16.png",
"48": "images/S-48.png"
},
"browser_action": {
"default_icon": "images/schifters.png",
"default_popup": "popup.html"
},
"description": " Schifters Tool",
"content_scripts": [
{
"matches": [
"https://schifters.be/viewforum.php*"
],
"js": ["content.js"]
}
]
}
popup.html
<!doctype html>
<html>
<head>
<title>Schifters Tool</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
<body>
<div class="modal-header">
<h1 class="logo">
Schifters Tool
<span href="https://schifters.be/index.php" class="version">(1.0.0)</span>
</h1>
</div>
<form>
<div class="activeerFilters">
<p>Geef aan welke posts verborgen moeten worden:</p>
</div>
</form>
<form>
<div class="filters">
<label for="facebook"><input id="facebook" type="checkbox" name="filtering"> Facebook wedstrijd</label>
</div>
</form>
<button id="save">Instellingen bewaren</button>
<div id="status"></div>
<script src="content.js"></script>
</body>
</html>
content.js
// Saves options to chrome.storage
function save_options() {
var facebook = document.getElementById('facebook').checked;
chrome.storage.sync.set({
facebookStatus: facebook,
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Instellingen zijn bewaard';
setTimeout(function() {
status.textContent = '';
}, 750);
filterAlles();
});
}
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
chrome.storage.sync.get({
facebookStatus: false,
}, function(items) {
document.getElementById('facebook').checked = items.facebookStatus;
// filtering of the threads
filterAlles();
});
}
function filterAlles() {
filterFacebook();
}
function filterFacebook() {
if(document.getElementById('facebook').checked) {
chrome.tabs.executeScript(null, {file: "verbergFacebook.js"});
} else {
chrome.tabs.executeScript(null, {file: "toonFacebook.js"});
}
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);
toonFacebook.js
{
// place all posts in an Array
const topics = Array.from(document.querySelector('[class="forumbg"]').querySelectorAll('ul>li'));
// show facebook posts
for (var i = 0; i < topics.length; ++i) {
// console.log(topics[i].textContent);
if (topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]') !== null ){
console.log('ok')
topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]').parentNode.parentNode.style.display = "";
} else {
// console.log('nok')
}
}
}
verbergFacebook.js
{
// place all posts in an array
const topics = Array.from(document.querySelector('[class="forumbg"]').querySelectorAll('ul>li'));
// hide all facebook posts
for (var i = 0; i < topics.length; ++i) {
// console.log(topics[i].textContent);
if (topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]') !== null ){
console.log('ok')
topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]').parentNode.parentNode.style.display = "none";
} else {
// console.log('nok')
}
}
}
and like the last 2 js. files there a a lot of extra files. Each time one for hiding a certain type of threads and one for showing a certain type of threads.
Maybe it is not efficient to have this code in ~20 different files? But I couldn't get my checkbox values working in these .js files.?
I expect the chrome extension to filter the threads on the forum (based on the settings of the check boxes from last time) immediately after loading the forum page.
The filter option already works when the extension popup is shown or when you change checkbox settings and click the button on the popup.html page.
But this last function is a mystery for me :)
Thnx in advance!
I' have it working. (more ore less)
The setup is as follows:
Manifest.json
{
"manifest_version": 2,
"name": " Schifters tool",
"permissions": [ "tabs", "activeTab", "storage" ],
"version": "0.1.1",
"icons": {
"128": "images/Schifters.png",
"16": "images/Schifters-16x16.png",
"32": "images/schifters-32x32.png"
},
"browser_action": {
"default_icon": "images/schifters.png",
"default_popup": "popup.html"
},
"description": " Schifters Tool",
"content_scripts": [
{
"matches": [
"https://schifters.be/viewforum.php*"
],
"js": ["content.js", "popup.js"]
}
]
}
popup.html
<!doctype html>
<html>
<head>
<title>Schifters Tool</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
<body>
<div class="modal-header">
<h1 class="logo">
<img class="logo-icon" src="images/Schifters.png"> Schifters Tool
<span href="https://schifters.be/index.php" class="version">(0.1.1)</span>
</h1>
</div>
<form>
<div class="activeerFilters">
<p>Geef aan welke posts verborgen moeten worden:</p>
<p><label for="activeerFilters"><input id="activeerFilters" type="checkbox" name="activeerFiltering">Activeer de filter opties</label></p>
</div>
</form>
<form>
<div class="filters">
<label for="gespeeld"><input id="gespeeld" type="checkbox" name="filtering"> <img src="./images/GESPEELD.png" alt="GESPEELD"> GESPEELD</label>
<label for="facebook"><input id="facebook" type="checkbox" name="filtering"> <img src="./images/facebookWedstrijd.png" alt="Facebook wedstrijd"> Facebook wedstrijd</label>
</div>
</form>
<button id="save">Instellingen bewaren</button>
<div id="status"></div>
<script src="content.js"></script>
<script src="popup.js"></script>
</body>
</html>
content.js
var topics = Array.from(document.querySelector('[class="forumbg"]').querySelectorAll('ul>li'));
function filterAlles(){
chrome.storage.sync.get({
activeerFiltersStatus: false,
gespeeldStatus: false,
facebookStatus: false
}, function(items) {
console.log("we zitten in de loop van de nieuwe functie");
for (var i = 0; i < topics.length; ++i)
{
if ( items.activeerFiltersStatus &&
((topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]') !== null && items.facebookStatus) ||
(topics[i].querySelector('[title="Markering verwijderen"]') !== null && items.gespeeldStatus))
)
{
console.log('ok - we gaan filteren');
if (topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]') !== null){
topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]').parentNode.parentNode.style.display = "none";
}
if (topics[i].querySelector('[title="Markering verwijderen"]') !== null){
topics[i].querySelector('[title="Markering verwijderen"]').parentNode.parentNode.parentNode.parentNode.style.display = "none";
}
}
else
{
if (topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]') !== null){
topics[i].querySelector('[style="background-image: url(./images/icons/misc/facebook.png); background-repeat: no-repeat;"]').parentNode.parentNode.style.display = "";
}
if (topics[i].querySelector('[title="Markering verwijderen"]') !== null){
topics[i].querySelector('[title="Markering verwijderen"]').parentNode.parentNode.parentNode.parentNode.style.display = "";
}
}
}} );
}
filterAlles();
(this is now correctly run when my forum page is loaded)
and only one other .js file this time
popup.js
// Saves options to chrome.storage
function save_options() {
var activeerFilters = document.getElementById('activeerFilters').checked;
var gespeeld = document.getElementById('gespeeld').checked;
var facebook = document.getElementById('facebook').checked;
chrome.storage.sync.set({
activeerFiltersStatus: activeerFilters,
gespeeldStatus: gespeeld,
facebookStatus: facebook
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Instellingen zijn bewaard';
setTimeout(function() {
status.textContent = '';
}, 750);
// filterAlles();
chrome.tabs.executeScript(null, {file: "content.js"})
});
}
// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
chrome.storage.sync.get({
activeerFiltersStatus: false,
gespeeldStatus: false,
facebookStatus: false
}, function(items) {
document.getElementById('activeerFilters').checked = items.activeerFiltersStatus;
document.getElementById('gespeeld').checked = items.gespeeldStatus;
document.getElementById('facebook').checked = items.facebookStatus;
if(document.getElementById('activeerFilters').checked) {
document.getElementById("gespeeld").disabled = false;
document.getElementById('facebook').disabled = false;
} else {
document.getElementById("gespeeld").disabled = true;
document.getElementById('facebook').disabled = true;
}
});
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);
var checkbox = document.getElementById("activeerFilters");
// Dit zorgt ervoor dat de checkboxen sensitief worden als je de 'activeer filters optie' selecteert
checkbox.addEventListener( 'change', function() {
if(this.checked) {
document.getElementById("gespeeld").disabled = false;
document.getElementById('facebook').disabled = false;
} else {
document.getElementById("gespeeld").disabled = true;
document.getElementById('facebook').disabled = true;
}
});
In this setup the threads are hidden when the page is loaded (based on the last settings of the check boxes in the popup.html file).
When settings are changed in the popup.html file then these changes are also applied.
So is seems to be working.
However I get some errors in console (and I don't know if this is an issue or not).
When I go to the console of the popup.html file I get this error:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at popup.js:48
it's referring to this line of code:
document.getElementById('save').addEventListener('click', save_options);
And that seems logical as the 'forum webpage' doesn't have the save button (that button is in the popup.html file).
Do I need to change anything in my code to avoid this? Or can I just ignore it?
The other error is in the popup.html console:
Uncaught TypeError: Cannot read property 'querySelectorAll' of null
at content.js:1
it's referring to this line of code:
var topics = Array.from(document.querySelector('[class="forumbg"]').querySelectorAll('ul>li'));
I think this is because the 'document.' should be changed to 'chrome.tabs.' when run from the popup.html page. But I find it strange that the forum threads are hidden correctly. How is it possible that this is working from the popup.html file if we can't placed the forum threads in an array.
I am creating a Google Chrome Extension that uses a script that works perfectly well in Google Chrome's console.
However, I am trying to use this same script beyond just printing the information in console.
How would I be able to somehow create HTML elements that contain this information within the popup.html page? I know that this idea might have to use the callback function within
Here is my code:
manifest.json
{
"manifest_version": 2,
"name": "MR QC Auditor View",
"version": "1.0",
"description": "This Google Chrome extension shows Ad ID's for print ads, and then links to Ad Tagger for tagging corrections",
"icons": {
"128": "MRLogo128.png",
"48": "MRLogo48.png",
"16": "MRLogo16.png"
},
"browser_action":{
"default_icon": "MRLogo16.png",
"default_popup": "popup.html"
},
"permissions": [
"storage",
"tabs",
"activeTab"
]}
popup.html:
<!DOCTYPE html>
<html>
<head>
<title>MR QC Auditor View</title>
<script src="jquery-3.3.1.min.js">
</script>
<script src="popup.js">
</script>
</head>
<body>
<img src="MRLogo128.png"/>
<h1>Current Ad's Brand: <h1><span id="brandNameText"></span>
<h2>Link To Ad Tagger</h2><span>Link</span>
</body>
</html>
popup.js:
// Current Post To Look At:
// https://stackoverflow.com/questions/4532236/how-to-access-the-webpage-dom-rather-than-the-extension-page-dom
// Related Google + Group Post:
// https://groups.google.com/a/chromium.org/forum/#!topic/chromium-extensions/9Sue8JRwF_k
// Use chrome.runtime.onMessage()
// Documentation:
// https://stackoverflow.com/questions/3010840/loop-through-an-array-in-javascript
// chrome.tabs.executeScript():
// https://developer.chrome.com/extensions/tabs#method-executeScript
/*
Old Code Block;
chrome.tabs.executeScript({file: 'jquery-3.3.1.min.js'}, function () { chrome.tabs.executeScript({code: 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); ', allFrames: true}, function(stuff){
chrome.runtime.sendMessage({greeting: "hello"}, function(){
// Call chrome.runtime.sendResponse()
// console.log("DOM Content Sent To Chrome Extension Webpage");
})
}}); });
*/
// Added an array called "adArray" that utilizes the .push() JavaScript array function
// I need to somehow add this to the popup.html page itself, look for the StackOverflow related pages.
chrome.tabs.executeScript({file: 'jquery-3.3.1.min.js'}, function (adArray) { chrome.tabs.executeScript({code: 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); var adArray = []; for (var i = 0; i<printAds.length; i++){console.log("Current Ad Id = " + $(printAds[i]).attr("data-adid")); adArray.push($(printAds[i]).attr("data-adid"))}', allFrames: true}); });
/*
Console Based Code That Works:
$("#ad-image printadviewable pointer").find("img").attr("data-adid");
var printAds = document.getElementsByClassName("ad-image printadviewable pointer");
for (var i = 0; i<printAds.length; i++){console.log("Current Ad Id = " + $(printAds[i]).attr("data-adid"));}
*/
// One Line Version For Code Dictionary Key
// 'var printAds = document.getElementsByClassName("ad-image printadviewable pointer"); for (var i = 0; i<printAds.length; i++){console.log("Current Ad Id = " + $(printAds[i]).attr("data-adid"));}'
This question already has answers here:
onclick or inline script isn't working in extension
(5 answers)
Closed 5 years ago.
I am trying to create a Chrome extensions that perform an Autocomplete functio on an input field.
First please have a look and the function code on a normal HTML page
<!DOCTYPE html>
<html>
<head>
<title>Testing autocomplete</title>
<script>
var people = ['Fabio', 'Marco', 'Pietro', 'Kucio', 'Pato'];
function matchPeople(input) {
var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
return people.filter(function(person) {
if (person.match(reg)) {
return person;
}
});
}
function changeInput(val) {
var autoCompleteResult = matchPeople(val);
var text = "";
var i;
for (i = 0; i < autoCompleteResult.length; i++) {
text += autoCompleteResult[i] + "<br>";
}
document.getElementById("result").innerHTML = text;
}
</script>
</head>
<body>
<input type="text" onkeyup="changeInput(this.value)">
<div id="result"></div>
</body>
</html>
Now, if we run this code on any webpage it works just fine.
The issue I am having is to move the above functions in a Chrome Extension.
I have my manifest.json here:
{
"name": "AutoComplete UZ",
"version": "1.0",
"description": "Provides with a small popup window with the AutoComplete function with UZ internal emails.",
"browser_action": {
"default_popup": "popup.html",
"default_title": "UZ AutoComplete"
},
"content_scripts": [
{
"matches" : ["http://*/*", "https://*/*"],
"css": ["style.css"],
"js" : ["popup.js"]
}
],
"manifest_version": 2
}
My popup.html file here:
<!DOCTYPE html>
<html>
<head>
<title>UZ AutoComplete</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="popup.js"></script>
</head>
<body>
<h1>UZ AutoComplete</h1>
<h3>Type email address</h3>
<input id="amount" type="text" onkeyup="changeInput(this.value)" placeholder="your email">
<div id="result"></div>
</body>
</html>
and my popup.js file here:
var people = [
'Fabio',
'Marco',
'Pietro',
'Kucio',
'Pato'
];
function matchPeople(input) {
var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
return people.filter(function(person) {
if (person.match(reg)) {
return person;
}
});
}
function changeInput(val) {
var autoCompleteResult = matchPeople(val);
var text = "";
var i;
for (i = 0; i < autoCompleteResult.length; i++) {
text += autoCompleteResult[i] + "<br>";
}
document.getElementById("result").innerHTML = text;
}
If I pack the above files and create an Extension, the above code will not work. I see the popup.html input field but the functions that make the magic won't trigger and I do not understand why.
I do not think I need an event.js page to run the above simple functions but please let me know the best approach for this. Hope I was clear enough on what I am trying to achieve.
Any help is more than welcome stackoverflowers!
Google Chrome extensions do not allow inline Javascript.
You'll need to to add an event listener in your popup.js instead.
document.querySelector('#amount').addEventListener('keyup', function() {
//get input's value and call your functions here
});
I'm trying to create an extension for Chrome Browser. It should include options where the behaviour of an newly created tab can be chosen (e.g. opening the tab in background or in foreground). The setting should be stored with localStorage.
As I'm new in programming JavaScript, I took the example code from http://developer.chrome.com/extensions/options and tried to customise it. This is what I have so far, and it is working (which means the chosen radio button is saved when page is reloaded) in jsfiddle: http://jsfiddle.net/yczA8/
I was really happy to see it working. But after having created and loaded the Chrome extension, it wasn't working any more. Also opening the html-File in Chrome Browser doesn't show the same behaviour as it does in jsfiddle. Why not? Where's the problem?
This is my popup.html:
<!DOCTYPE html>
<html>
<head>
<style>
body {
min-width: 200px;
min-heigth: 100px;
overflow-x: hidden;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<h3>Neuer Tab im:</h3>
<form method="post">
<input type="radio" name="tabVerhalten" value="tabVordergrund" />Vordergrund
<br />
<input type="radio" name="tabVerhalten" value="tabHintergrund" />Hintergrund
</form>
<div id="status"></div>
<button id="save">Save</button>
</body>
</html>
This one is popup.js:
// Saves options to localStorage.
function save_options() {
var tabVerhalten1 = document.getElementsByName('tabVerhalten')[0].checked;
var tabVerhalten2 = document.getElementsByName('tabVerhalten')[1].checked;
var tabVerhaltenIndex;
if (tabVerhalten1)
tabVerhaltenIndex = 0;
else if (tabVerhalten2)
tabVerhaltenIndex = 1;
localStorage.setItem("tabVerhalten", tabVerhaltenIndex);
// Update status to let user know options were saved.
var status = document.getElementById("status");
status.innerHTML = "Änderungen gespeichert.";
setTimeout(function () {
status.innerHTML = "";
}, 750);
}
// Restores select box state to saved value from localStorage.
function restore_options() {
var storedVal = localStorage.getItem("tabVerhalten");
if (!storedVal) {
return;
}
document.getElementsByName('tabVerhalten')[storedVal].checked = true
}
restore_options();
document.addEventListener('DOMContentLoaded', restore_options);
document.querySelector('#save').addEventListener('click', save_options);
and finally the manifest.json:
{
"manifest_version": 2,
"name": "TEST",
"version": "1.0",
"author": "STM",
"description": "Description",
"permissions": ["contextMenus", "tabs"],
"background": {"scripts": ["script.js"]},
"icons": {"16": "16.png", "48": "48.png", "128": "128.png"},
"browser_action": {"default_icon": "48.png", "default_popup": "popup.html"}
}
Try doing this instead:
document.addEventListener("DOMContentLoaded", function() {
restore_options();
}, false);
I MADE THE FOLLOWING CHANGES:
I removed method="post"
I moved <script src="popup.js"></script> after all the other script
I changed the parameters for the addEventListener() method
HERE ARE THE CHANGED SCRIPTS
popup.html:
<!DOCTYPE html>
<html>
<head>
<style>
body {
min-width: 200px;
min-heigth: 100px;
overflow-x: hidden;
}
</style>
</head>
<body>
<h3>Neuer Tab im:</h3>
<form>
<input type="radio" name="tabVerhalten" value="tabVordergrund" />Vordergrund
<br />
<input type="radio" name="tabVerhalten" value="tabHintergrund" />Hintergrund
</form>
<div id="status"></div>
<button id="save">Save</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
// Saves options to localStorage.
function save_options() {
var tabVerhalten1 = document.getElementsByName('tabVerhalten')[0].checked;
var tabVerhalten2 = document.getElementsByName('tabVerhalten')[1].checked;
var tabVerhaltenIndex;
if (tabVerhalten1)
tabVerhaltenIndex = 0;
else if (tabVerhalten2)
tabVerhaltenIndex = 1;
localStorage.setItem("tabVerhalten", tabVerhaltenIndex);
// Update status to let user know options were saved.
var status = document.getElementById("status");
status.innerHTML = "Änderungen gespeichert.";
setTimeout(function () {
status.innerHTML = "";
}, 750);
}
// Restores select box state to saved value from localStorage.
function restore_options() {
var storedVal = localStorage.getItem("tabVerhalten");
if (!storedVal) {
return;
}
document.getElementsByName('tabVerhalten')[storedVal].checked = true
}
restore_options();
document.addEventListener('DOMContentLoaded',function() {restore_options();}, false);
button_thing = document.querySelector('#save').addEventListener('click',function() {save_options();}, false);
Your problem is, in JSFiddle you are running the JS-code onLoad and in your files you are running the JS-code in the header.
If you change it in your JSFiddle, it's no longer working as you can see here: JSFiddle.
So, what can you do to solve this issue?
There are different ways, I'll recommend to load your JS-code on load, like JSFiddle does. To do this, add the onload event to your body tag. There you call a function named 'loadMyScript();' or something like this:
<body onload="loadMyScript();">
For the next step, you have the choice: You can put your whole code in the loadMyScript() function or you import your script with the loadMyScript() function. I didn't test those ways, so I can't tell you which one is working better or which one is simpler but you should try the import-script-way first, because I think this could avoid issues.
Little example of the import-script-way:
<head>
<script>
function loadMyScript() {
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "popup.js";
document.body.appendChild(js);
}
</script>
<!-- YOUR HTML HEAD HERE -->
</head>
<body onload="loadMyScript();">
<!-- YOUR HTML BODY HERE -->
</body>
I am creating a Chrome Extension that upon clicking the extension icon will present the user with a button, clicking that button will open a new tab which will display a parameter passed to it from the original page. The strange thing is that this will work if I debug it (i.e. right click the extension icon and click "Inspect popup"), but it will just show a blank page upon clicking the button if I'm not debugging.
manifest.json
{
"name": "test name",
"version" : "0.1",
"description": "test description",
"browser_action":
{
"default_icon": "icon_128.png",
"popup": "test.html"
},
"permissions": [
"tabs", "http://*/*", "https://*/*"
]
}
test.html
<HTML>
<BODY>
<script type="text/javascript">
var currentWindowID = -1;
window.onload = function(e){
chrome.windows.getCurrent(function(w)
{
currentWindowID = w.id;
});
}
function openNextPage(){
console.log("in openNextPage");
chrome.tabs.create(
{url: "test2.html"},
function(tab)
{
chrome.tabs.sendRequest(tab.id, {someParam: currentWindowID});
}
);
console.log("exiting openNextPage");
}
</script>
<input type="button" value="Show next page" onClick="openNextPage()">
</BODY>
</HTML>
test2.html
<HTML>
<script type="text/javascript">
chrome.extension.onRequest.addListener(function(request)
{
document.write("<h1>test</h1>");
document.write("<h2>value=" + request.someParam + "</h2>");
});
</script>
</HTML>
The browser will activate the new tab when it is created, and your popup will be closed. Therefore, the callback is never called from chrome.tabs.create. The background page is a more proper place for such code.
test.html
<HTML>
<BODY>
<script type="text/javascript">
var currentWindowID = -1;
window.onload = function(e){
chrome.windows.getCurrent(function(w)
{
currentWindowID = w.id;
});
}
function openNextPage() {
var bg = chrome.extension.getBackgroundPage();
bg.openNextPage(currentWindowID);
}
</script>
<input type="button" value="Show next page" onClick="openNextPage()">
</BODY>
</HTML>
background.html
<HTML>
<BODY>
<script type="text/javascript">
function openNextPage(currentWindowID) {
console.log("in openNextPage");
chrome.tabs.create(
{url: "test2.html"},
function(tab)
{
chrome.tabs.sendRequest(tab.id, {someParam: currentWindowID})
}
);
console.log("exiting openNextPage");
}
</script>
</BODY>
</HTML>