Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I Need to get source code of current tab when the chrome extension icon is clicked . i have also tried with button click event. Please go through my current code :
manifest.json
{ "name": "UM Chrome Extension!", "version": "1.0",
"description": "To ensure the tracking codes present.",
"icons": {
"128": "TW-Extension-Icon2.png"
}, "background": {
"scripts": [ "background.js"]
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["popup1.js","jquery-1.10.2.js","jquery-ui.js","bootstrap.min.js"]
}
],
"permissions": [
"activeTab","tabs","contextMenus", "http://*/*"
],
"browser_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html
<!doctype html>
<html class="no-js" lang="">
<head>
<script type="text/javascript" src="popup1.js"></script>
</head>
<body style="width: 600px; height: 300px;">
<button value="Test" id="check-1"> </button>
</body>
</html>
and popup.js
window.addEventListener('DOMContentLoaded', function() {
var fbshare = document.querySelector('#check-1');
fbshare.addEventListener('click', function() {
var htmlCode = document.documentElement.outerHTML;
window.alert(htmlCode);
});
});
How to get active tab's source code ? i need to get source code of the page so that i need to search whether the page contains particular tracking code(like GA code).
Thank You
Your manifest has both "content_scripts" (which run in the context of the page on document_idle) and "browser_action" scripts (which run in an isolated context when the extensions menu button is clicked).
In popup.html you reference popup.js, so in popup.js when you call document.documentElement.outerHTML you're getting the content of popup.html, not the active tab.
You reference both popup.js and popup1.js, which is confusing. You're currently running the same code in both the popup and the page context, which is almost guaranteed to break in one or the other. By convention use content.js in "content_scripts" and reference popup.js in the action popup.html.
"content_scripts" run in every page, whether users click on the extension or not. Your current manifest is adding ["popup1.js","jquery-1.10.2.js","jquery-ui.js","bootstrap.min.js"] to every page, which is needlessly slow.
Avoid using jQuery in Chrome extensions. It's fairly large and a browser standardisation library doesn't add much when you know for absolute certain that all your users are on Chrome. If you can't code without it then try to restrict it to just your popup or load it in dynamically.
You set a "scripts": [ "background.js"], which runs constantly in the background and isn't needed at all in your current code. If you need to do things outside of the action button consider using event pages instead.
Use the Chrome API to get from the context of the popup to the page. You need to query chrome.tabs to get the active tab, and then call chrome.tabs.executeScript to execute script in the context of that tab.
Google's API uses callbacks, but in this example I'm going to use chrome-extension-async to allow use of promises (there are other libraries that do this too).
In popup.html (assuming you use bower install chrome-extension-async):
<!doctype html>
<html>
<head>
<script type="text/javascript" src="bower_components/chrome-extension-async/chrome-extension-async.js"></script>
<script type="text/javascript" src="popup.js"></script>
</head>
<body style="width: 600px; height: 300px;">
<button value="Test" id="check-1"> </button>
</body>
</html>
In popup.js (discard popup1.js):
function scrapeThePage() {
// Keep this function isolated - it can only call methods you set up in content scripts
var htmlCode = document.documentElement.outerHTML;
return htmlCode;
}
document.addEventListener('DOMContentLoaded', () => {
// Hook up #check-1 button in popup.html
const fbshare = document.querySelector('#check-1');
fbshare.addEventListener('click', async () => {
// Get the active tab
const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
const tab = tabs[0];
// We have to convert the function to a string
const scriptToExec = `(${scrapeThePage})()`;
// Run the script in the context of the tab
const scraped = await chrome.tabs.executeScript(tab.id, { code: scriptToExec });
// Result will be an array of values from the execution
// For testing this will be the same as the console output if you ran scriptToExec in the console
alert(scraped[0]);
});
});
If you do it this way you don't need any "content_scripts" in manifest.json. You don't need jQuery or jQuery UI or Bootstrap either.
Related
This seems to be the easiest thing to do, but it's just not working. In a normal browser the .html and .js files works perfectly, but in the Chrome/Firefox extension the onClick function is not performing what it's supposed to do.
.js file:
function hellYeah(text) {
document.getElementById("text-holder").innerHTML = text;
}
.html file:
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">
ha
</div>
<br />
<a onClick=hellYeah("xxx")>
hyhy
</a>
</body>
</html>
So basically once the user clicks "hyhy", "ha" should change into "xxx". And again - it works perfectly in the browser but does not work in the extension. Do you know why? Just in case I'm attaching the manifest.json below as well.
manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"http://api.flickr.com/"
]
}
Chrome Extensions don't allow you to have inline JavaScript (documentation).
The same goes for Firefox WebExtensions (documentation).
You are going to have to do something similar to this:
Assign an ID to the link (<a onClick=hellYeah("xxx")> becomes <a id="link">), and use addEventListener to bind the event. Put the following in your popup.js file:
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('link');
// onClick's logic below:
link.addEventListener('click', function() {
hellYeah('xxx');
});
});
popup.js should be loaded as a separate script file:
<script src="popup.js"></script>
Reason
This does not work, because Chrome forbids any kind of inline code in extensions via Content Security Policy.
Inline JavaScript will not be executed. This restriction bans both inline <script> blocks and inline event handlers (e.g. <button onclick="...">).
How to detect
If this is indeed the problem, Chrome would produce the following error in the console:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
To access a popup's JavaScript console (which is useful for debug in general), right-click your extension's button and select "Inspect popup" from the context menu.
More information on debugging a popup is available here.
How to fix
One needs to remove all inline JavaScript. There is a guide in Chrome documentation.
Suppose the original looks like:
<a onclick="handler()">Click this</a> <!-- Bad -->
One needs to remove the onclick attribute and give the element a unique id:
<a id="click-this">Click this</a> <!-- Fixed -->
And then attach the listener from a script (which must be in a .js file, suppose popup.js):
// Pure JS:
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("click-this").addEventListener("click", handler);
});
// The handler also must go in a .js file
function handler() {
/* ... */
}
Note the wrapping in a DOMContentLoaded event. This ensures that the element exists at the time of execution. Now add the script tag, for instance in the <head> of the document:
<script src="popup.js"></script>
Alternative if you're using jQuery:
// jQuery
$(document).ready(function() {
$("#click-this").click(handler);
});
Relaxing the policy
Q: The error mentions ways to allow inline code. I don't want to / can't change my code, how do I enable inline scripts?
A: Despite what the error says, you cannot enable inline script:
There is no mechanism for relaxing the restriction against executing inline JavaScript. In particular, setting a script policy that includes 'unsafe-inline' will have no effect.
Update: Since Chrome 46, it's possible to whitelist specific inline code blocks:
As of Chrome 46, inline scripts can be whitelisted by specifying the base64-encoded hash of the source code in the policy. This hash must be prefixed by the used hash algorithm (sha256, sha384 or sha512). See Hash usage for <script> elements for an example.
However, I do not readily see a reason to use this, and it will not enable inline attributes like onclick="code".
I had the same problem, and didn´t want to rewrite the code, so I wrote a function to modify the code and create the inline declarated events:
function compile(qSel){
var matches = [];
var match = null;
var c = 0;
var html = $(qSel).html();
var pattern = /(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/mg;
while (match = pattern.exec(html)) {
var arr = [];
for (i in match) {
if (!isNaN(i)) {
arr.push(match[i]);
}
}
matches.push(arr);
}
var items_with_events = [];
var compiledHtml = html;
for ( var i in matches ){
var item_with_event = {
custom_id : "my_app_identifier_"+i,
code : matches[i][5],
on : matches[i][3],
};
items_with_events.push(item_with_event);
compiledHtml = compiledHtml.replace(/(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/m, "<$2 custom_id='"+item_with_event.custom_id+"' $7 $8");
}
$(qSel).html(compiledHtml);
for ( var i in items_with_events ){
$("[custom_id='"+items_with_events[i].custom_id+"']").bind(items_with_events[i].on, function(){
eval(items_with_events[i].code);
});
}
}
$(document).ready(function(){
compile('#content');
})
This should remove all inline events from the selected node, and recreate them with jquery instead.
I decide to publish my example that I used in my case. I tried to replace content in div using a script. My problem was that Chrome did not recognized / did not run that script.
In more detail What I wanted to do: To click on a link, and that link to "read" an external html file, that it will be loaded in a div section.
I found out that by placing the script before the DIV with ID that
was called, the script did not work.
If the script was in another DIV, also it does not work
The script must be coded using document.addEventListener('DOMContentLoaded', function() as it was told
<body>
<a id=id_page href ="#loving" onclick="load_services()"> loving </a>
<script>
// This script MUST BE under the "ID" that is calling
// Do not transfer it to a differ DIV than the caller "ID"
document.getElementById("id_page").addEventListener("click", function(){
document.getElementById("mainbody").innerHTML = '<object data="Services.html" class="loving_css_edit"; ></object>'; });
</script>
</body>
<div id="mainbody" class="main_body">
"here is loaded the external html file when the loving link will
be clicked. "
</div>
As already mentioned, Chrome Extensions don't allow to have inline JavaScript due to security reasons so you can try this workaround as well.
HTML file
<!doctype html>
<html>
<head>
<title>
Getting Started Extension's Popup
</title>
<script src="popup.js"></script>
</head>
<body>
<div id="text-holder">ha</div><br />
<a class="clickableBtn">
hyhy
</a>
</body>
</html>
<!doctype html>
popup.js
window.onclick = function(event) {
var target = event.target ;
if(target.matches('.clickableBtn')) {
var clickedEle = document.activeElement.id ;
var ele = document.getElementById(clickedEle);
alert(ele.text);
}
}
Or if you are having a Jquery file included then
window.onclick = function(event) {
var target = event.target ;
if(target.matches('.clickableBtn')) {
alert($(target).text());
}
}
I'm completely new in building chrome extensions. I've tried a building a couple extensions that work when i click on them. This time i've been trying to figure out how to build a toggle on/off extensions.
Basically what i'm trying to build is an extension that executes a code (ex: alert('Hi')) when i toggle it on and off and will continue to run on every page until i toggle it off.
I've looked a lot and I can't find any good resources that could explain how to do it.
i have my manifest and my html file and i know i need a popup.js and background.js files but i have no idea what to put inside.
manifest.json
{
"manifest_version": 2,
"name": "Toggle Extension",
"description": "My Personal Toggle Extension",
"version": "1.0.0",
"icons": {
"128": "img/icon_128.png"
},
"browser_action": {
"default icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["js/background.js"]
}
}
popup.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>POC Extension</title>
<meta name="description" content="POC Extension">
<meta name="author" content="Yann Bohbot">
<!-- <link rel="stylesheet" href="css/popup.css"> -->
<link rel="stylesheet" href="css/popup.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/popup.js"></script>
</head>
<body>
<h2>Toggle</h2>
<ul class="tg-list">
<li class="tg-list-item">
<h4>Flat</h4>
<input type="checkbox" id="cb4" class="tgl tgl-flat" value = "Disable" />
<label class="tgl-btn" for="cb4"></label>
</li>
</ul>
</body>
</html>
an extension that executes a code (ex: alert('Hi')) when i toggle it
on and off and will continue to run on every page until i toggle it
off.
Seems like you have to read a lot on this resourse: google extension guide
I would have done this task in this way:
popup.html have popup.js file, which have a function which sends
state of your extension ("ON" or "OFF") to background script;
content.js runs on each tab in browser, and it starts with request
to background script whether your extension is ON or OFF;
background script sends a respond to each content script with
current state of your ext.
when content script get the respond,
it checks it and decides shoud it stop or continue execution of your
script.
So, it is obvious that at first you need a content script. Put this snippet in you manifest file:
"content_scripts": [
{
"js": [ "content.js" ],
"matches": [ "<all_urls>" ],
"all_frames": true,
"run_at": "document_end"
}
],
At the beginning of your content.js file write:
console.log("Hello, Yann!");
chrome.runtime.sendMessage( {myQuestion: "Is it ON or OFF?"}, function(response) {
console.log( "Extension state is: " + response.state); // should be ON
if(response.state !== "ON") return;
// Put the code you want to execute on every tab below:
// ....
});
Your background.js file must have this piece of code:
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log( "Your question was: " + request.myQuestion );
// here we will get information whether ext is ON or OFF from the popup;
sendResponse({state: "I don't know, but I'll find it out!"});
});
Try this, if it works, I'll try to help with popup.
When we click on the extension button, listed beside the address bar (where the URL appears), popup.html of the corresponding extension shows up. (of course, according to manifest.json)
When I click on lastPass, the popup appears instantly, but when I click on my custom-extension (contains nothing but popup.html), the mouse icon changes to loading for 1-2 seconds & then the popup opens up.
Did some digging on why my popup is so slow, the google-groups had something like
window.load=setTimeout(activate,0);
Unable to find any related documentation, or working sample.
Please help in figuring out why my extension popup is so slow, though the code contains nothing just the popup (beginner in chrome-extensions development).
Update
manifest.json
{
"manifest_version": 2,
"name": "Sample Name",
"description": "Sample Descriptoin",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"<all_urls>"
]
}
popup.html
<!doctype html>
<html>
<head>
</head>
<body>
<div>
<label>Enter HR Password</label>
<input type='password' id='passwd'/>
<button id='evaluateResults'>Evaluate</button>
<ul id='results' style='width:100px;'>
</ul>
</div>
<script src='popup.js'></script>
</body>
</html>
popup.js
var totalCorrect=0, totalWrong=0;
document.getElementById('evaluateResults').addEventListener('click',function(){
var passwd=document.getElementById('passwd').value;
if(passwd==='123'){
var strCode="var scriptOptions = {role:'blank'};";
chrome.tabs.executeScript(null, {code: strCode,allFrames:true}, function(){
chrome.tabs.executeScript(null, {file: "content_script_evaluate.js",allFrames:true});
});
}else{
alert("Incorrect Password");
}
});
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log(request);
var ul=document.getElementById('results');
var li=document.createElement('li');
li.innerHTML=request.testName+" - "+(request.testResult?"Correct":"Wrong");
ul.appendChild(li);
});
What worked for was to add an empty background page.
This is not explained in the Google Documentation (or at least I did not find it), so it was more of a fluke, but seems to work.
The idea is that the plugin is loaded once when you come to the page (so before you even click), as opposed to being reloaded over and over again on each click.
In the manifest add something like:
{
//...
"background": {
"page": "bg.html"
}
//...
}
And the bg.html can just be an empty HTML file:
<html>
</html>
Again - never found an explicit link or resource explaining why this should be done like this, and I am not sure it is the best practice, but it did work for me.
I am trying to make a google extension that plays music. I want the extension to also play when I close the extension and surf other sites. Do I have to change the code of the manifest.json, background.html, or main.html (my index/popup file)? Here is the code of my manifest.json:
{
"name": "SpeedSongz.fm",
"description": "Instantly listen to your favorite music and radios.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_title": "SpeedSongz.fm",
"popup": "main.html"
},
"background_page" : "background.html"
}
So how do I make the code so that the music will keep running in the background even thought the actual extension is closed? Is it possible? Thanks!
plus feature could be, to create two function in bakcround page, one
stops the music, and the other restarts it:
function stop(){
}
function start(){
}
So, when the user opens main.html, there could be two icons with two
listeners on it, each one could call background pages function, like:
var backgroundpage = chrome.extension.getBackgroundPage();
$("start_button").click(function(){
backgroundpage.start();
});
$("stop_button").click(function(){
backgroundpage.stop();
});
:)
Edit:
popup.html:
<html><head><script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
var bgp = chrome.extension.getBackgroundPage();
$("#start_btn").click(function(){
bgp.start();
});
$("#stop_btn").click(function(){
bgp.stop();
});
});
</script>
</head><body>
<div>
<button type="button" id="start_btn">Start</button>
<button type="button" id="stop_btn">Stop</button>
</div>
</body></html>
background.html:
<html><head><script type="text/javascript" src="jquery.js"></script>
<script>
var audio = new Audio('guitar.mp3');
audio.loop="loop";
audio.play();
function start(){
audio.play();
}
function stop(){
audio.pause();
}
</script>
</head><body></body></html>
And thats it :)
Background pages serve exactly this purpose. They act like regular pages, but are invisible (unless you access developer mode of course). A background page is active the entire time that your extension is loaded.
In order to communicate with the background page from your site you would use a content script and send a message to the page.
Where I can find an example code of chrome extension which shows the current address in a popup?
Thanks.
Ron
Documentation: http://code.google.com/chrome/extensions/getstarted.html
Samples: http://code.google.com/chrome/extensions/samples.html
This is the official documentation and sample code for Google Chrome extensions. In your manifest you want to declare a popup for either a page or browser action (whichever best suites your extension). In your popup HTML file you probably want something like the following;
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function initPopup() {
chrome.tabs.getSelected(null, function (tab) {
document.body.appendChild(document.createTextNode(tab.url));
});
}
</script>
</head>
<body onload="initPopup();"></body>
</html>
This very simply appends the URL of the selected tab to the body of the popup.
Your manifest should look like the following;
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs"
]
}
The file structure for this example is a single folder containing manifest.json, popup.html and icon.png.
On the Extensions page (chrome://extensions) you should click Load unpacked extension... and navigate to this folder. If you make any changes to the manifest be sure to click the Reload link to pick up these changes.
I hope this helps but I strongly suggest reading through the documentation I mentioned above to get a better understanding of what you're doing.
EDIT: Added missing null argument to code and included an example manifest and file structure based on additional information gathered from comments.
Try this code in your popup, it works for me (Google Chrome 14-beta):
chrome.windows.getCurrent(function(window) {
chrome.tabs.getSelected(window.id, function(tab) {
console.log(tab);
console.log(tab.url); // url of the current tab
});
});
For more information check: http://code.google.com/chrome/extensions/tabs.html#method-getSelected
It looks like all these answers are outdated so here is a manifest 2 example. You will need jQuery for this example. I have included all the files in a gist.
manifest.json
{
"manifest_version": 2,
"name": "Hello World",
"version": "1.0",
"author": "Christian Juth",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
popup.html
<!doctype html>
<html>
<head>
<title>Hello World</title>
<script src="jquery.js"></script>
<script src="popup.js"></script>
</head>
<body>
<span id="address"></span>
</body>
</html>
popup.js
$(document).ready(function(){
//define query
var query = { active: true, currentWindow: true };
//query tabs
chrome.tabs.query(query, function (tabs) {
currentAddress = tabs[0].url;
$('#address').text(currentAddress);
});
});