I'm writing a google chrome extension . it has two textareas and a button . once the button is clicked , it takes the code from the first textarea , does some logic on it and then pasts and shows the output in the second textarea . it works fine when I open the .html file in the browser but when I wanna use it as an extension it doesn't function and when I click the button nothing happens . I think it's got something to do with permissions , I've already put : "contextMenus",
"clipboardRead",
"clipboardWrite" permissions on my manifest file but it still doesn't work .
I'll appreciate if someone can help me with this .
thanks
edit : codesmanifest.json :
{
"name": "MissLang Fix extension",
"manifest_version": 2,
"version": "1.0",
"description": "fixing english to farsi typings.",
"icons":{
"128":"icon_128.png"
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "missLangFix.html"
},
"permissions": [
"contextMenus",
"clipboardRead",
"clipboardWrite"
]
}
missLangFix.html :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="script.js"></script>
<title>MissLang Fix</title>
</head>
<body>
<center>
<div id="test"></div>
<textarea class="txtarea" id="input" rows="4" cols="50"></textarea>
<!--<div class="myBtn" onClick="myClick()">
<b style="line-height:30px">fix</b>
</div>-->
<br/>
<input type="button" value="fix" onclick="myClick()" />
<br/>
<textarea class="txtarea2" id="output" rows="4" cols="50" readonly="readonly"></textarea>
</center>
</body>
</html>
script.js :
window.onload = myOnload();
function myOnload(){
var myString = document.getElementById("txtarea").innerHTML = "";
}
function myClick(){
var myString = document.getElementById("input").value;
for(var i=0;i<myString.length;i++){
myString = myString.replace("q","ض");
myString = myString.replace("w","ص");
myString = myString.replace("e","ث");
}
//document.getElementById("txtarea").value = myString;
document.getElementById("output").innerHTML = myString;
}
Alright, the problem is the inline onClick handler on your button. Just move that to your script.js onLoad handler and it should start to work. First add an idto the button to make this easy.
<input id="button" type="button" value="fix" />
Next, get that button and add the onclick
function myOnload(){
var myString = document.getElementById("txtarea").innerHTML = "";
var button = document.getElementById("button");
button.onclick= function(){myClick()};
}
...
Here is a fiddle for it: http://jsfiddle.net/x2w2p/1/
Related
I'm trying to build some chrome extension.
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>Translator Api</title>
<script src="index.js"></script>
</head>
<body>
Key: <input type="text" id="key">
<br>
Password: <input type="text" id="pass">
<br>
<button type="submit" id="submit">Submit</button>
</body>
</html>
js
document.addEventListener('DOMContentLoaded', function() {
var key, pass, submit, d = document;
key = d.getElementById('key');
pass = d.getElementById('pass');
submit = d.getElementById('submit');
chrome.storage.sync.get('key', function (items) {
if (items.key)
key.value = items.key;
});
chrome.storage.sync.get('pass', function (items) {
if (items.pass)
pass.value = items.pass;
});
submit.onclick = function () {
chrome.storage.sync.set({
key : key.value,
pass : pass.value
});
};
});
manifest
{
"manifest_version" : 2,
"name" : "bla bla",
"description" : "bla bla",
"version" : "1.0",
"browser_action" : {
"default_icon" : "icon.png",
"default_popup" : "index.html"
},
"permissions" : [
"storage"
]
}
But I'm getting this error when I open the popup window:
Unchecked runtime.lastError while running storage.get: IO error: .../LOCK: No further details
When I check for permissions for the extension it says:
No special permissions for that extension
I tried to search in google for a solution for this problem , but couldn't to find anything related.
I reloaded the extension, remove and add it, but still don't work.
if someone could direct me to a solution I will be grateful.
This problem is not related to your application it is caused by some google extension please close the google extension one by one see this video for refrence
I've created a chrome packaged app which comes down from the Chrome Store as a CRX. I'd like to let the user send mail from the app, using a mailto: link. It appears that this is not allowed, because of security restrictions (when I try in development, that's the error I get).
I found another thread where they said it worked by setting location.href, but that question is pretty old, and I'm assuming the security restriction may be new.
So… is there any way to open the user's local mail client from a chrome packaged app, so they can send a message?
A few remarks:
This question is about providing the mailto functionality from within an iframe in the main window.
Adding a link (with the appropriate href) works fine, but requires user-interaction (clicking the link): ...
Using location.href = ... is prevented from the Content Security Policy (which can possibly be relaxed - I didn't look further into it).
Using window.top.location.href = ... results in the following error:
Can't open same-window link to "mailto:..."; try target="_blank".
The solution:
It worked for me using:
window.open("mailto:...");
For the sake of completeness, below is the source code of a sample extension that illustrates the above
manifest.json:
{
"manifest_version": 2,
"name": "Test App",
"version": "0.0",
"app": {
"background": {
"scripts": ["background.js"]
}
}
}
background.js:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create("wrapper.html");
});
wrapper.html:
<!DOCTYPE html>
<html>
<head></head>
<body><iframe src="main.html"></iframe></body>
</html>
main.html:
<!DOCTYPE html>
<html>
<head><script type="text/javascript" src="main.js"></script></head>
<body>
<form id="frm1">
<input type="email" id="inp1" placeHolder="Recipient's e-mail"
required /><br />
<input type="text" id="inp2" placeHolder="Message's subject"
required /><br />
<input type="submit" id="btn1" value="Send e-mail" />
</form>
</body>
</html>
main.js:
window.addEventListener("DOMContentLoaded", function() {
var frm1 = document.getElementById("frm1");
var inp1 = document.getElementById("inp1");
var inp2 = document.getElementById("inp2");
var btn1 = document.getElementById("btn1");
frm1.addEventListener("submit", function(evt) {
evt.preventDefault();
});
btn1.addEventListener("click", function() {
var email = inp1.value;
var subject = encodeURIComponent(inp2.value);
var mailToStr = "mailto:" + email + "?Subject=" + subject);
console.log(mailToStr);
window.open(mailToStr);
});
});
I am developing a simple page action extension in google chrome and it has the following purpose.
Show a pop-up on click and prompt for username and password.
After a small validation, it should fill the username and password for the website, like gmail.com.
I saw couple of examples on how to do that on window load and I was able to do a pop-up separately. But I am not able to access the parent html from the pop-up's html.
Any help would be highly appreciated.
Here are the contents of my code.
Manifest.json:
{
"name": "My First Chrome App",
"version": "1.0",
"description": "Auto fill content",
"background": { "scripts": ["background.js"] },
"page_action" :
{
"default_icon" : "icon-19.png",
"default_title" : "Auto Fill",
"default_popup" : "test.html"
},
"permissions" : [
"tabs"
],
"icons" : {
"48" : "icon-48.png",
"128" : "icon-128.png"
},
"manifest_version": 2
}
background.js
function checkForValidUrl(tabId, changeInfo, tab) {
//checks whether the document contains Steve Jobs
if (tab.url.indexOf("gmail")) {
chrome.pageAction.show(tabId);
}
};
chrome.tabs.onUpdated.addListener(checkForValidUrl);
test.html
<html>
<head>
<title> Hi Steve </title>
<script type="text/javascript">
function fill()
{
alert("inside method");
}
</script>
</head>
<body>
<form name="userinfo" id="userinfo">
username :
<input type="text" name="username"/>
password :
<input type="password" name="password"/>
<input type="button" value="Log In" onclick="fill()";/>
</form>
</body>
</html>
Thanks,
Shankar
Create a popup window for your login that has the username and password fields.
http://code.google.com/chrome/extensions/browserAction.html#popups
When the popup form is submitted send a message to the background page which then sends a message to your (page's) content script which is then responsible for filling out and submitting the form.
http://code.google.com/chrome/extensions/content_scripts.html
You'll need to understand message passing to do this:
http://code.google.com/chrome/extensions/messaging.html
I just tried chrome.history.deleteURL in an HTML page and it's not working. Can anyone say where I am going wrong?
Urls.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Your History</title>
<style>
body {min-width: 300px;}
</style>
<script type="text/Javascript">
function deleteURL(form){
var urlName = form.url.value;
chrome.history.deleteUrl(urlName);
}
</script>
</head>
<body>
<form onSubmit="deleteURL(this);">
Enter url here : <input type="text" name="url" />
<input type="submit" value="submit" />
</form>
</body>
</html>
manifest.json:
{
"name": "Browser History",
"version": "1.0",
"description": "Shows up the history",
"permissions": [
"history",
"tabs"
],
"browser_action": {
"default_popup": "Urls.html",
"default_icon": "history.jpg"
}
}
After executing the program I can still see the URL which I wanted to delete.
Although I have never used the chrome.history.* API before your code looks like it should work.
Have you remembered to add the required permission to your manifest?
Edit:
Doh! I just realised that your API call is invalid. Try using this updated version of the deleteUrl function;
function deleteURL(form){
chrome.history.deleteUrl({
url: form.url.value
});
}
Notice that I've wrapped the argument in an object with a url property as per the API. Don't know why I didn't see that earlier.
I want to allow the user to select the icon that appears for their extension from a list. Is there a way to edit the manifest from within the extension?
So If I have the following in my chrome extension manifest file:
"browser_action": {
"default_icon": "ico32.gif",
}
And I want to give the user the ability to change it to the following from within the extension itself:
"browser_action": {
"default_icon": "ico32green.gif",
}
Is there a way to do that?
There is no way to directly edit the manifest file. However, you can use the following work around to modify the property on browser load. This particular code sets the icon on browser load and allows the user to specify what icon should be set on browser load:
In manifest.json:
{
"browser_action": {
"default_icon": "ico32.gif",
},
"options_page": "options.html",
"background_page":"background.html"
}
In background_page:
<script>
var icon = localStorage["icon"];
if(icon == undefined){
icon = "ico32.gif";
localStorage["icon"] = icon;
}
chrome.browserAction.setIcon({"path":localStorage["icon"]});
</script>
In options page:
<html>
<body>
<h1>Choose you color:</h1>
<p>
<img class="color" src="ico48.gif" />
<img class="color" src="icoGreen.gif" />
<img class="color" src="icoPurple.gif" />
<img class="color" src="icoRed.gif" />
</p>
<script>
var colors = document.getElementsByClassName("color");
for(var i=0,ii=colors.length;i<ii;i++){
colors[i].addEventListener("click", changeColor);
}
function changeColor(e){
localStorage["icon"] = e.target.src;
chrome.browserAction.setIcon({"path":localStorage["icon"]});
}
</script>
</body>
</html>