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
Related
I'm just having a hard day trying to figure out this but still couldn't get anywhere, I have a google chrome extension built with manifest v3 which is the latest version supported by google, Inside this extension i have a popup html file that opens up when you click on the extension icon
What i want is, when i click the "change background" button the background of the active tab/page changes to red
What i tried is doing it without the popup thing and it worked! when you click on the icon it actually changes the background color of the active page here is the code for the files used:
manifest.json
{
"name": "Action script injection demo",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_title": "Click to show an alert",
"default_popup": "./popup.html"
},
"permissions": ["activeTab", "scripting"],
"background": {
"service_worker": "background.js"
}
}
popup.html
<html>
<header>
</header>
<body>
<input type="button" value="Change background" id="btnChangeBackground" />
</body>
</html>
background.js
chrome.action.onClicked.addListener((tab) => {
chrome.scripting.executeScript({
target: {tabId: tab.id},
files: ['content.js']
});
});
content.js
document.querySelector("body").style = "background-color:red;";
Thank you in advance.
I am trying to create a chrome extension for specific page actions , the extension job should display a preview of the each href link in that specific page on mouse-over . I know that iframe can be used but i am beginner i have no clue how to do it . In that specific page if the mouse is moved to the href link in the page content the live preview should be be displayed in a frame .
Can anyone kindly help me out in this ?
I have created the Manifest.josn now what are the things i should include in that code for mouseover
{
"name": "Hover",
"version": "1.0",
"manifest_version":2,
"description": "Making your first Google Chrome extension.",
"background_page": "test.html",
"Page_action":
{
"default_icon": "icon.png",
"default_title": "welcome"
},
"permissions" : [
"tabs"
],
"icons":{
"48":"icon.png",
"128":"icon_128.png"
}
}
HTML:
<html>
<head>
<script>
function check(tab_id,data,tab)
{
if(tab.url.indexof('https://www.amazon.com/')>-1)
{
Chrome.pageAction.show(tab_id);
}
};
chrome.tabs.onUpdated.addListener(check);
</script>
</head>
</html>
My request is , the extension should work in that specific page and the extension should do the mouseover action of all the link in that page . When ever the mouse move to the any link in that page it should display the link of the page in a pop .
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.
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
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.