When I open:
Incpect Popup
Next select tab scripts
I get samtimes empty list scriprs.
I write a simply extension manifest.json (my minimum)
{
"name": "TEST",
"version": "1.0",
"browser_action": {
"popup": "popup.html"
}
}
Popup.html
<!DOCTYPE html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<h1>TEST1</h1>
<div id="content">
TEST
</div>
</body>
</html>
popup.js
console.log('test OK');
Sometimes I get list but not with all my js files.
This file is only short example. I send to console message, and I see this message and I see this file in resource, but i not see in the scripts tab.
My chrome version is 9.0.597.98.
I try with other version and I have the same problem.
During the next update, this will be solved. If it doesn't, please submit a bug in http://crbug.com/new
Related
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.
So here is my manifest.json
{
"name":"My Extension",
"version": "1.0",
"manifest_version": 2,
"description": "Test Description",
"browser_action":
{
"default_icon": "icon.jpg",
"default_title": "Title of Extenstion",
"default_popup": "mypopup.html"
},
"permissions":
[
"activeTab",
"notifications",
"create",
"tabs"
]
}
here is my html
<!DOCTYPE html>
<html>
<head>
<title>This is a test popup</title>
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
</html>
I am very new to this and tried following a tutorial, i followed it step by step, both the manifest and html document are in the same folder. It shows my extension in the extensions tab and everything, but when i click on it nothing happens like it should. Can anyone find what i did wrong because my editor says nothing is wrong. All i want to do is display a simple popup in html
I am assuming that it shows a popup, but it is a very small square because everything is correct but you didn't put this:
style.css
body, html {
width: 100px;
height: 200px;
}
mypopup.html in the head:
<link rel="stylesheet" type="text/css" href="style.css">
If that doesn't work, then you have the wrong file name/location. Also you should right click the browser_action icon and click "inspect popup" to see the dev tools to debug it.
I am developing a chrome extension. This is how my extension is structured:
I have a browser action defined such that clicking on it loads a local HTML file default.html. This is my manifest file:
{
"name": "Example Extension",
"version": "0.1",
"manifest_version": 2,
"browser_action": {
"default_title": "Does nothing.",
"default_icon": "icon.png"
},
"background": {
"scripts": ["extension.js"]
},
"permissions": ["tabs"]
}
This is my extension.js:
chrome.browserAction.onClicked.addListener(function(tab) {
var newURL = chrome.extension.getURL('default.html');
chrome.tabs.create({ url: newURL });
});
This is my default.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" href="jquery-1.10.2.min.js"></script>
<script type="text/javascript" href="donothing.js"></script>
</head>
<body>
<b>It works!</b>
</body>
</html>
I want to access chrome's currently open tabs in donothing.js and display some statistics in the default.html. I learn that I can not access chrome.* APIs within my donothing.js. If I have understood the docs correctly, I should declare and define a content script and pass messages as donothing.js --> contentscript.js --> extension.js and vice versa to achieve what I want to. Is there a simpler way to do this? Can someone explain the need for the content script here?
Thanks,
I simply want to send the current tab url to my extension:
Following is my manifest.json
{
"name": "DocUrlExtention",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["contentscript.js"]
}
]}
Following is my contentscript.js
chrome.extension.sendRequest({url: window.location.href}, function(response) {
console.log(response.farewell);
});
Following is my popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<script>
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
});
</script>
<!-- JavaScript and HTML must be in separate files for security. -->
<!--<script src="popup.js"></script>-->
</head>
<body>
<div id="mydiv">Doc Id:</div>
</body>
</html>
I don't see anything in console. I am new to Chrome extensions.
Your manifest file contains "manifest_version": 2,, which enables the Content Security Policy. By default, Inline JavaScript will not be executed. And, there is no way to relax the CSP such that inline JavaScript is allowed.
You've got two options:
Remove "manifest_version": 2 (which disabled the default CSP).
Move the inline JavaScript to an external file.
The second method is recommended, and also suggested in your code...
...
<!-- JavaScript and HTML must be in separate files for security. -->
<!--<script src="popup.js"></script>-->
</head>
...
PS. The Dev tools for the pop-up can be opened by right-clicking on the browser action icon, and selecting the last option, "Inspect popup".
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);
});
});