I'm currently developing an overlay for Google Chrome (A toolbar if you prefer), and i have some issues with and i can't understand the reason why.
So, basically i've created an extension with this manifest.json :
{
"background_page" : "background.html",
"browser_action" :
{
"default_icon" : "images/Extension.png"
},
"content_scripts":
[ {
"all_frames": true,
"css": ["css/overlay.css"],
"js": ["js/overlay.js"],
"matches": ["http://*/*"],
"run_at": "document_start"
} ],
"permissions" : ["tabs", "unlimitedStorage", "http://*/*"],
"name" : "MyOverlay",
"version" : "1.1",
"description" : "Sindar Overlay"
}
The concept is that my background.html page will call the jquery.js and overlay.js. Then on the initialization of overlay.js it will call the html page (overlay.html) by using
<iframe id="YourToolbarFrame" src="'+toolbarURL+'">
The problem is that when i'm trying to start the extension everything seem to be good, no compilation problem but i don't see my overlay. And when i'm just opening the html page all is ok, i see it. So i'm asking myself if the problem dont come from the contentscript or from the permissions but i dont know where it could come from...
Thanks in advance.
Edit 23/02/2011 - 18:46
background.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/overlay.js"></script>
</head>
</html>
overlay.js
var overlay= {
init: function() {
this.injectoverlay();
//alert('Initialisation reussie');
},
injectoverlay: function() {
var body = $('body'),
overlayURL = chrome.extension.getURL("overlay.html"),
iframe = $('<iframe id="YouroverlayFrame" src="'+overlayURL+'">');
body.append(iframe);
iframe.show();
//alert('Injection reussie');
}
}
var length = {}, maxLength = 0, currentLength;
$(function(){
$('#menu li.title')
.each(function(){
// Save the Menu Length
length[$(this).attr('id')] = currentLength = $(this).height();
// Fix the height
$(this).height(20);
if(currentLength > maxLength)
{
maxLength = currentLength;
}
// To don't overflow on the content
$('#menu').height(maxLength);
})
.mouseenter(function(){
$(this).stop().animate({
height: length[$(this).attr('id')]
}, 500);
})
.mouseleave(function(){
$(this).stop().animate({
height: '20px'
}, 500);
});
});
$(document).ready(function() {
overlay.init();
});
overlay.html
<html>
<head>
<title>overlay</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/overlay.css" type="text/css"></link>
<base target="_blank" />
</head>
<body>
<div class="default">
<form id="searchForm">
<img id="logo" src="images/Extension.png"></img>
<input type="search" value="Enter you research" name="search">
<input type="submit" value="Go !" /> |
</form>
<ul id="menu">
<!--
<li class="title" id="accueil">
<a class="" href="#">Accueil</a>
</li>
-->
<li class="title" id="contact">
<a class="" href="#">Contact</a>
<ul class="dropMenu">
<li>google</li>
<li>yahoo</li>
</ul>
</li>
</ul>
</div>
<!-- Include the library of Google, more centralized.
Optimized the browser cache.
Compressed version. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>
</html>
Currently you include overlay.js as a content script to all pages plus include it into a background page for some reason. You don't need a background page for this task. If you are doing this just to inject jquery the solution would be to download jquery.js and put it into your extension folder, then automatically inject it in the manifest.json:
//"background_page" : "background.html", - this is not needed
"content_scripts":
[ {
"all_frames": true,
"css": ["css/overlay.css"],
"js": ["js/jquery.js", "js/overlay.js"], //jquery included as well
"matches": ["http://*/*"],
"run_at": "document_start"
} ],
(besides a background page doesn't have visible body, so you inject your frame to an invisible page right now)
Related
Using Chrome Manifest 3, how can I write a chrome extension that can query the contents of the active tab? I've looked at the API for tabs as well as the scripting API, but I can't seem to find the right way to query the DOM contents of the active tab.
When the button in my popup HTML "Save Content" is clicked, I am expecting my function changeBackgroundColor to execute, allowing me access to the DOM of the active tab. However, the function never executes and moreover I do not know whether or not I will be able to query the DOM of the active tab while my code executes within changeBackgroundColor
Does anyone see what I am doing wrong? Here are the relevant files below:
Here is my popup.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<main id="app---KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaU">
<div class="app__hero-section--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaUp">
<button id="save-content--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaU" class="app__save-content-button--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaUp">Save content</button>
<button id="get-images--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaU" class="app__get-images-button--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaUp">Get Images</button>
</div>
<div class="app_images-hero--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaUp">
Select Images To Import
</div>
<div class="app_images-section--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaUp">
</div>
<button class="app__import-images-button--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaUp">Import Images</button>
<script type="text/javascript" src="jquery-3.5.0.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
</main>
</body>
</html>
This is the JS of the popup:
function changeBackgroundColor() {
console.log('here!!')
}
function findOrCreateContent() {
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
func: changeBackgroundColor
})
});
}
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('#save-content--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaU').addEventListener('click', findOrCreateContent);
});
This is my manifest json:
{
"manifest_version": 3,
"icons": {
"16": "thing-icon.png",
"128": "thing-icon.png"
},
"name": "Content Saver",
"description": "Save content in the cloud",
"version": "0.1.0",
"action": {
"default_title": "Content Saver",
"default_popup": "popup.html"
},
"permissions": [
"scripting"
],
"host_permissions": [
"http://*/*",
"https://*/*"
]
}
Can someone help me, I'm building my first chrome extension and it's a popup with a button that's supposed to do something on click (just using alert now), but somehow whatever in my js file doesn't seem to be working. Styles also seem not to load.
manifest:
{
"name": "Toolbar",
"manifest_version": 2,
"version": "1.0.2",
"description": "Toolbar",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "None",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "http://*/", "https://*/"
]
}
popup.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="popup.js"></script>
</head>
<body>
<div>
<button type="button" id="closeButton"> x<button/>
</div>
</body>
</html>
popup.js:
function closePopup ()
{
//window.close();
alert("hello");
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('closeButton').on("click", function (){
closePopup();
}
});
});
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<!--<script src="popup.js"></script> delete this-->
</head>
<body>
<div>
<button type="button" id="closeButton"> x<button/>
</div>
<!--add this--><script src="popup.js"></script>
</body>
</html>
place the script after the object, where the eventlistener is placed on. I had the same problem and that fixed it
You've got to put the <script src="popup.js"></script> in the <body> instead of <head> tag. That worked for me.
Trying to set a radio (yes or no) default (Yes) building a chrome extension...
Saw lots of other posts whit similar error
Cannot read property 'setAttribute' of null
but the solutions:
document.getElementById('Yes').checked = "checked";
didn't work for me.
Thanks in advance for helping.
Manifest.json
{
"manifest_version": 2,
"name": "Yest or No",
"description": "Yes or No",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["jQuery-v1.10.0.js", "script.js"],
"persistent": false
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
]
}
Popup.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
</head>
<head>
<title>Yes or No</title>
<script src="jQuery-v1.10.0.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
script.js
$( document ).ready(function() {
document.getElementById('Yes').setAttribute('checked', 'checked');
});
test.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="padding-top: 5px">
<span style="font-size:12px">
<input type="radio" name="FotoPadrao" id="Yes" value="1"> Yes
<input type="radio" name="FotoPadrao" id="No" value="0"> No
</span>
</div>
</body>
I'll jump straight to the answer; you need to add a radio button to your HTML, but first, let's go through your code.
Since you use jquery, there is no need to do document.getElementById, you can use the jquery selector
$("#radio").prop('checked',true);
This snippet will check a radio button for the id "radio".
The code you posted did not have an radio button and this is why you had an error : when getElementById tried to find your input, it did no detect it, so it returned null. Javascript cannot change the attribute of a null object, so it throwed an exception, halting your code.
Here is a snippet of how it should have been :
https://jsfiddle.net/gctkhvm4/1/
I recommend you read up on HTML and jquery here :
http://www.w3schools.com/
It contains great ressources to get started
Edit: I updated the fiddle to take in account the missing html file
The problem might come from the fact that you're trying to set the id of an element not in the same file as the script
I had to add pure java script in a content_scripts... code is updated.
How to implement the ajax script using the get , post calls and ActiveX objects for search suggestions in a text box in asp.net?
You can use jquery autocomplete plugin and it works like a charm.
JQueryUI Autocomplete
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>
The example above binds a static array to the control, instead you can also get dynamic array in document.ready() using ajax call.
manifest.json
{
"name": "Summer",
"version": "1.0",
"manifest_version": 2,
"description": "This is an addition extension",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<!-- JavaScript and HTML must be in separate files for security. -->
<script src="popup.js"></script>
</head>
<body>
<form name="form">
<div id="sayi1">Sayı 1 : <input type = "text" name="deger1"></div>
<div id="sayi2">Sayı 2 : <input type = "text" name="deger2"></div>
<div id="sonuc">Sonuç : <input type = "text" name="cevap"></div>
<div id="button"><input type="button" value="Hesapla" onclick="hesaplama()" /></div>
</form>
</body>
</html>
popup.js
function hesaplama()
{
var sayi1 = window.document.form.deger1.value;
var sayi2 = window.document.form.deger2.value;
var toplam = parseFloat(sayi1) + parseFloat(sayi2) ;
window.document.form.cevap.value = toplam;
}
When i load this extension, i can see normally. But when i filled the deger1 and deger2 textbox and clicked the button, function is not working, in the sonuc textbox (result textbox) is null.
How can i fix it? I am new at creating chrome extensions. Thanks for your help.
You've got manifest_version : 2 in your manifest, so please go read about the changes it introduces....
http://code.google.com/chrome/extensions/manifestVersion.html
You got in the console Refused to execute inline event handler because of Content-Security-Policy, because of the onclick event handler in your html (<input type="button" value="Hesapla" onclick="hesaplama()" />). With manifest version 2 this isnt allowed, you need to attach the event listner from your js code and not in the html.
Here's a working version of your code....
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<!-- JavaScript and HTML must be in separate files for security. -->
<script src="popup.js"></script>
</head>
<body>
<form name="form">
<div id="sayi1">Sayı 1 : <input type = "text" name="deger1"></div>
<div id="sayi2">Sayı 2 : <input type = "text" name="deger2"></div>
<div id="sonuc">Sonuç : <input type = "text" name="cevap"></div>
<div id="button"><input type="button" value="Hesapla" /></div>
</form>
</body>
</html>
popup.js
function hesaplama()
{
var sayı1 = window.document.form.deger1.value;
var sayı2 = window.document.form.deger2.value;
var toplam = (parseFloat(sayı1) + parseFloat(sayı2)) ;
window.document.form.cevap.value = toplam;
}
window.onload = function(){
document.querySelector('input[value="Hesapla"]').onclick=hesaplama;
}