I get the feeling I'm missing something very obvious, but I've been looking everywhere and can't seem to make this work. In short, I want to turn a small Javascript script into a chrome extension to make it easier to use.
The script just reads text from a textArea, modifies the script and outputs it into a div. It works perfectly with any browser when running standalone, but doesn't seem to want to work when ran as a Chrome extension
Here are the files (I'm basically trying to convert the example):
Thanks!
manifest.json
{
"manifest_version": 2,
"name": "One-click Kittens",
"description": "This extension demonstrates a 'browser action' with kittens.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"https://secure.flickr.com/"
]
}
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
min-width: 357px;
overflow-x: hidden;
}
img {
margin: 5px;
border: 2px solid black;
vertical-align: middle;
width: 75px;
height: 75px;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
-->
<script src="popup.js"></script>
</head>
<body>
<textarea id="source">Text Entry.</textarea>
<button onclick="main()" id="buttons">Generate</button>
<div id="result">
</div>
</body>
</html>
popup.js
function main() {
var source = document.getElementById('source').value;
document.getElementById("result").innerHTML = source;
}
According to chrome extension documentation,
Inline JavaScript will not be executed. This restriction bans both inline <script> blocks and inline event handlers (e.g. <button onclick="...">).
Read: http://developer.chrome.com/extensions/contentSecurityPolicy.html#JSExecution
Use in popup.js as
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('button').addEventListener('click', main);
});
function main() {
var source = document.getElementById('source').value;
document.getElementById("result").innerHTML = source;
}
Related
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>.
I am trying to replicate search functionality through an extension similar to what page search does using Ctrl+F. I have been going through the documentation on developing a basic chrome extension. I have created below but somehow it doesn't work.
What i have done so far is, created a popup html page which will take search text as input parameter and tries to send the message to content script, as content script has access to the dom elements enabling searching can be done. I am also not sure how exactly i can do the debugging part here specially for the extension/content script.
manifest.json:
{
"manifest_version": 2,
"name": "Custom Search Plugin",
"description": "This extension allows to search for the current page",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
// change 'matches' attribute to load content script(search.js) only in pages you want to
"matches": ["<all_urls>"],
"js": ["jquery-1.11.3.min.js","search.js"],
"css": ["highlight.css"]
}
],
"permissions": [
"tabs",
"activeTab"
]
}
HTML:
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
#searchfield{
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
max-width: 400px;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<input type="search" name"pagesearch" id="searchfield">
</body>
</html>
Popup.js:
window.onload = function(){
document.getElementById('searchfield').oninput = searchText;
};
function searchText(){
var search = document.getElementById('searchfield').value;
if(search){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: search},function(response) {
console.log(response.farewell);
});
});
}
}
search.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log(request.greeting);
});
Somewhere i am missing some important stuff. Please help!
I'm trying to create my 1st Chrome extension, but I have issues to make my JS work properly.
All I want to do is, when I click on "Activer", it shows a popup that says "hello".
It's a code that i found in a github that i tried to adapt to my code.
When I inspect my extension, I'm getting an error that goes like this :
Unchecked runtime.lastError while running tabs.executeScript: Cannot access contents of url "http://stackoverflow.com/questions/ask". Extension manifest must request permission to access this host.
at HTMLDivElement.hello (chrome-extension://clolnlfhhjonbfknjgebnmnfanpmcono/popup.js:4:15)
Here is my manifest.json
{
"name": "e-kootsa",
"version": "1.0",
"manifest_version": 2,
"description": "Ce plugin vous permet d'écouter le texte d'une page",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"options_page": "options.html"
}
Here is my popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
body{
margin: 0px;
padding: 0px;
font-family: Arial, Sans-serif;
font-size: 20px;
width: 200px;
}
.selection{
text-align: center;
margin-bottom: 5px;
}
.global{
padding-top: 5px;
}
a{
text-decoration: none;
color: #000;
}
</style>
</head>
<body>
<div class="global">
<div class="selection">Paramètres</div>
<hr />
<div class="selection" id="clickme">Activer</div>
<hr />
<div class="selection">À propos </div>
</div>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
Here is the popup.js
// var app = chrome.runtime.getBackgroundPage();
function hello() {
chrome.tabs.executeScript({
file: 'alert.js'
});
}
document.getElementById('clickme').addEventListener('click', hello);
And here is my alert.js
alert('hello ' + document.location.href);
console.log('Tryhard');
I know I must have done some mistakes, but I still have difficulties to understand how to make things work...
Thank you in advance !
Samurai's answer is valid, but falls short of optimal.
If you are working with the active tab like this, you don't need a blanket permission for everything. Declaring <all_urls> will result in scary warnings for the user on install.
There is a special permission, "activeTab", specifically for this purpose. It grants permission for the current tab when the extension is invoked by the user (e.g. by pressing its button).
"permissions": ["activeTab"],
For a more conservative solution see Xan's answer
======
It works with the active tab so you need to add permission in your manifest for every possible URL you want it to work = all URLs: "permissions": ["<all_urls>"]. So your manifest will look like this:
...
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": ["<all_urls>"],
"options_page": "options.html"
Just adding that it should work fine.
Hi I have run into a very weird problem.
I have a basic chrome extension which has a default popup.html document defined as follows:
<html>
<head>
<script type="text/javascript">
function disp() {
document.getElementById("test").innerHTML = "Bye";
}
</script>
</head>
<body>
<p id="test">Hello</p>
<button type="button" onclick="disp()">'Twas Nice to meet you</button>
</body>
</html>
Upon running the html file independently in a browser, it behaves as expected: clicking on the button changes the text of the p tag. However, from withing the chrome extension, in the popup the button does not seem to respond
Is this something to do with popups in general or something specific to my code?
Although you've found out you can circumvent the inline script "issue" (it is a security feature), below is what it would look like if you did not do that. This shows both how to call a notification and a "window"-based dialog.
manifest.json
{
"name": "Hello World!",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"notifications",
"create",
"tabs"
]
}
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started with Extension's Popup</title>
<style>
body {
min-width:357px;
overflow-x:hidden;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>
<!-- JavaScript and HTML must be in separate files for security. -->
<script src="popup.js"></script>
</head>
<body>
<div style="text-align: center;">
<button type="button" id="click">Show Notification</button>
<button type="button" id="dialog">Show Dialog</button>
</div>
</body>
</html>
dialog.html
<!doctype html>
<html>
<head>
<title>Dialog Prompt - Chrome</title>
<style>
body {
overflow: hidden;
margin: 0px;
padding: 0px;
background: white;
}
p {
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<p>This is a dialog prompt.</p>
</body>
</html>
popup.js
var notifier,
dialog;
function showNotify() {
var notify;
if (window.webkitNotifications.checkPermission() == 0) {
notify = window.webkitNotifications.createNotification(
"",
'Notification Test',
'This is a test of the Chrome Notification System. This is only a test.'
);
notify.show();
} else {
window.webkitNotifications.requestPermission();
}
}
function showDialog(){
chrome.windows.create({
url: 'dialog.html',
width: 200,
height: 120,
type: 'popup'
});
}
function init() {
clicker = document.querySelector('#click');
dialog = document.querySelector('#dialog');
clicker.addEventListener('click', showNotify, false);
dialog.addEventListener('click', showDialog, false);
}
document.addEventListener('DOMContentLoaded', init);
You can find the files to download here:
http://jfcoder.com/projects/chrometestdialogs/
manifest_version 2 doesn't allow user to enter the function inside the html file for security purpose, should we need to write all the function in separate file and import it to that html file like below
<head>
<script src="yourjsfile.js"></script> //All our functions are defined here
<script src="jquery.js"></script> // This is the jquery
</head>
and the function calling are not allowed here like onclick, onkeydown,onkeyup, etc...
<body>
<p id="test">Hello</p>
<button type="button" id="btn">Twas Nice to meet you</button>
</body>
In above "onclick="disp()" not allowed, and should assign a id
so should we need to create the event and definition must create from the .js file
So you should write a js file like below yourjsfile.js
document.addEventListener('DOMContentLoaded', function () {
$("#btn").on("click",function(){
disp();
});
});
function disp() {
document.getElementById("test").innerHTML = "Bye";
}