My extension should automatically fill my gmail user name and password, but it's not working.
manifest.json
{
"manifest_version": 2,
"name": "Click to execute",
"description": "Akshaya app",
"version": "1.0",
"icons": {
"48": "icon.png"
},
"permissions": [
"tabs", "<all_urls>"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["https://www.facebook.com/*"],
"js": ["popup.js"]
}
]
}
popup. html file
<button id="buttonSet">Set Value</button>
<script type="text/javascript" src="popup.js"></script>
popup.js
function setValue() {
var name ="username";
var pass = "password";
document.getElementById('username').value =name;
document.getElementById('pass').value =pass;
}
document.getElementById('buttonSet').addEventListener('click', setValue);
I got all code from Internet and i haven't any previous experience in working with google extension
and i googled many times for solving the issue i couldn't find any solution for this issue
I hope I understand you right . You could use message passing between your content script to your script that run in popup.html(myscript.js):
manifest.json
{
"manifest_version": 2,
"name": "Click to execute",
"description": "Akshaya app",
"version": "1.0",
"icons": {
"48": "icon.png"
},
"permissions": [
"tabs", "<all_urls>"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["https://www.facebook.com/*"],
"js": ["popup.js"]
}
]
}
popup.html.
<script type="text/javascript" src="myscript.js"></script>
<button id="buttonSet">Set Value</button>
<input type="text" id="username">
<input type="text" id="pass">
popup.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
//Take the fields of user and password from the DOM of facebook log-in page
document.getElementById('email').value=request.user;
document.getElementById('pass').value=request.pass;
});
myscript.js
window.onload=function(){
document.getElementById('buttonSet').addEventListener('click',function(){
chrome.tabs.query({}, function(tabs) {
for(var i = 0; i < tabs.length; i++) {
chrome.tabs.sendMessage(tabs[i].id, {user :document.getElementById('username').value,
pass :document.getElementById('pass').value}, function(response) {
});
}
});
});
}
In myscript.js you will need to send a message to a content script tab you want by their ID . Here it's example to that I send to all the tabs message until I find the one that wait for message.
At the end of the result in the first input will show 'username' and you could do this also for the second parameter.
Good luck .
Related
I am trying to create a chrome extension that injects some content into product pages on a particular site. Currently my content.js only runs if I manually refresh the tab on a matching page. I need it to run automatically every time the user navigates to a matching page.
manifest.json
{
"manifest_version": 2,
"name": "My Test",
"version": "1.0",
"description": "My Test POC",
"icons": {
"128": "/images/128x128_elevated_b_icon_purp.png",
"48": "/images/48x48_elevated_b_icon_purp.png",
"16": "/images/16x16_elevated_b_icon_purp.png"
},
"page_action": {
"default_icon": "/images/16x16_elevated_b_icon_purp.png",
"default_title": "My Test"
},
"background": {
"scripts": ["/scripts/eventPage.js"],
"persistent": true
},
"content_scripts": [
{
"matches": ["https://www.tesco.com/groceries/en-GB/products/*"],
"run_at": "document_idle",
"js": ["/scripts/libs/jquery.min.js", "/scripts/content.js"],
"css": ["content.css"]
}
],
"permissions": [
"tabs",
"https://www.tesco.com/groceries/en-GB/products/*"
]
}
eventPage.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request.todo == "showPageAction") {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.pageAction.show(sender.tab.id);
alert('eventPage.js');
});
}
});
content.js
chrome.runtime.sendMessage({todo: "showPageAction"});
alert('content.js');
$(document).ready(function() {
var productName = $('head title').text().replace(' - Tesco Groceries', '');
console.log('Product Name: ' + productName);
//Do stuff
});
I have an object WIO on a webpage which i want to access in my chrome extension. I have followed this example and injected my script.js in the page using first method.
I can successfully read WIO object in script.js. But the problem is i can't access it in popup.html.
Any suggestions will be great appreciated.
Here is manifest.json
{
"manifest_version": 2,
"name": "Campaign Analyzer",
"description": "Analyze campaign data",
"version": "0.1",
"icons": { "128": "icon_128.png" },
"browser_action": {
"default_popup": "popup.html"
},
"permissions": ["activeTab", "<all_urls>"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-3.4.1.min.js", "inject.js"]
}
],
"web_accessible_resources": ["script.js"]
}
inject.js
s.src = chrome.runtime.getURL("script.js");
s.onload = function() {
this.remove();
};
(document.head || document.documentElement).appendChild(s);
script.js
setTimeout(function() {
console.log(WIO.sessionInfo.context);
}, 6000);
I'm trying to make a Google chrome extension that injects a script upon clicking the extension icon. However, i want the same script to be injected whenever I load/go to another page, without having to click on the extension icon again.
background.js
chrome.browserAction.onClicked.addListener(function (tab) {
if (tab.url.startsWith("https://")){
chrome.tabs.executeScript(tab.id, {
"file": "js/contentscript.js"
}, function () {
console.log("Script Executed .. "); // Notification on Completion
});
}
else{
alert('Error');
}
});
manifest.json i want to execute the script on browserAction so adding the script on content_scripts is not an option i would like to pursue
"permissions": ["tabs", "windows", "notifications", "activeTab"],
"version": "2.0",
"browser_action":
{
"name": "Click to activate extension",
"default_icon": "images/icon.png",
},
"background":
{
"scripts":["js/background.js"]
},
"icons":
{
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"content_scripts":
[{
"js": ["js/jquery-2.1.4.min.js"],
"matches": [ "https://*/*" ],
"run_at": "document_end"
}]
contenscript.js - only a sample script, but gets my point across
alert("here");
setTimeout(function(){window.open("www.google.com");});
P.S. This is my first time asking a question in stackoverflow, please be gentle with me. :D
You could listen to webNavigation.onCompleted event, which fires when a document, including the resources it refers to, is completely loaded and initialized.
Compared with tabs.onUpdated event, you could use event filters to restrict your event notifications. For this part, you could check my answer in this post Running an extension in background on page load/refresh for more details.
manifest.json
{
"name": "36735306",
"version": "1.0",
"description": "Your description here",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"web_accessible_resources": ["content.js"],
"permissions": [
"webNavigation",
"<all_urls>"
]
}
background.js
chrome.webNavigation.onCompleted.addListener(function(details) {
if(details.frameId === 0) {
chrome.tabs.executeScript(details.tabId, {"file": "content.js"});
}
});
How can I write a simple Chrome Extension content script that will execute JavaScript (for example alert("hello");) on every page load?
So when I navigate to a page or reload a page, the JavaScript should run.
This is my manifest.json file so far:
{
"name": "Highlight some phrases",
"description": "Hightlight some pre defined text from websql database after page loads",
"version": "0.1",
"permissions": [
"tabs","<all_urls>"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["content.js"]
}
],
"background": {
"page": "background.html"
},
"manifest_version": 2
}
If all you need is to alert hello on every page load or reload, below is a simple demo:
Manifest.json:
{
"name": "Highlight some phrases",
"description": "Hightlight some pre defined text after page loads",
"version": "0.1",
"permissions": [
"tabs","<all_urls>"
],
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["content.js"],
"run_at": "document_end" // Pay attention to this line
}
],
"manifest_version": 2
}
and content.js:
// alert("hello");
document.body.style.background = 'yellow';
Yes, that's enough.
And of course, don't forget to add an icon named icon.png at the same directory with these two files, then test it in Google Chrome.
I'm new to chrome extensions and cannot seem to figure out how the background concept works. I am building a counter extension that keeps counting even when the user closes the extension (but not the browser) and wanted to do a simple test to see if I could figure out how to use the background file. Below is my attempt to create a function that activates everytime a user clicks on a tab (outside of my extension) and when they click on 5 tabs, the alert hits. I cannot figure out why this doesn't work.
background.js:
var counter = 0;
chrome.browserAction.onClicked.addListener(function(tab){
counter++;
if (counter == 5) {
alert("Hi");
}
});
manifest.json:
{
"name": "Hello World!",
"description": "My first packaged app.",
"version": "0.1",
"permissions": ["tabs", "http://*/*"],
"manifest_version":2,
"content_scripts": [ {
"js": [ "jquery-1.9.1.js", "myscript.js" ],
"matches": [ "http://*/*", "https://*/*"]
}],
"background": {
"scripts": [
"background.js"
]
},
"browser_action": {
"default_title": "10,000 Hours",
"default_icon": "icon16.png",
"default_popup": "index.html"
},
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}
It is working for me with following code.
manifest.json
{
"name": "Popping Alert",
"description": "http://stackoverflow.com/questions/15194198/background-js-not-working-chrome-extension",
"background": {
"scripts": [
"background.js"
]
},
"version": "1",
"manifest_version": 2,
"browser_action": {
"default_title": "Click Me"
}
}
background.js
var counter = 0;
chrome.browserAction.onClicked.addListener(function (tab) {
counter++;
if (counter == 5) {
alert("Hey !!! You have clicked five times");
}
});
Can you share your related code or put your problem statement clearly if this does not work?