I'm very much new to the whole chrome extensions world.
I've read through the tutorial "hello world" pages and tried to gain an understanding of content_scripts and background.html - but I may have overdosed and can't seem to find an answer to something I'm sure is a simple task.
In a tab a site contains the following Hidden HTML:
<div class="XYZ">
<input id="form_ID" type="hidden" value="REF_CODE#Product_CODE#Product Name#">
</div>
What I'm trying to figure out is how I can Display the
RefCode
ProductCode
Product Name
In a popup.html
I'm not looking at editing the html or manipulating it in any way.. it is strictly just displaying the hidden HTML - in an easy to read Popup.
Hope that makes sense..
Thanks in Advance.
UPDATE:
Popup.html
<html>
<head>
<script>
function readIds() {
console.log('Send request to content script');
document.getElementById("response").innerText = "Requesting...";
chrome.tabs.getSelected(null,function(tab){
chrome.tabs.sendRequest(tab.id, {cmd: "readIds"}, function(response){
console.log('Response from page is:' + response);
document.getElementById("response").innerText = JSON.stringify(response);
});
});
}
</script>
</head>
<body style="width:400px;">
Click to read ids
<pre id="response"></pre>
</body>
</html>
Content_script.js
// add a listener to get messages from background, popup
chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
switch (request.cmd) {
case "readIds":
console.log("readIds", request);
document.getElementById("productID");
sendResponse({refCode:1, productCode: 2, productName: 3});
break;
}
});
manifest.json
{
// Required
"name": "WP Debug",
"version": "0.0.1",
// Recommended
"description": "A plain text description",
"icons": { "48": "icon.png" },
//"default_locale": "en",
// Pick one (or none)
"browser_action": {
"default_icon": "icon.png", // optional
"default_title": "WP Debug", // optional; shown in tooltip
"popup": "popup.html"
},
"permissions": [ "http://*/", "https://*/", "tabs" ],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content_script.js" ],
"run_at": "document_idle"
}
]
}
Your popup needs to send a message to your content script which then gathers up the hidden field info and sends the response back to the popup.
Here is an example:
popup.html
<html>
<head>
<script>
function readIds() {
console.log('Send request to content script');
document.getElementById("response").innerText = "Requesting...";
chrome.tabs.getSelected(null,function(tab){
chrome.tabs.sendRequest(tab.id, {cmd: "readIds"}, function(response){
console.log('Response from page is:' + response);
document.getElementById("response").innerText = JSON.stringify(response);
});
});
}
</script>
</head>
<body style="width:400px;">
Click to read ids
<pre id="response"></pre>
</body>
</html>
content_script.js
// add a listener to get messages from background, popup
chrome.extension.onRequest.addListener(function (request, sender, sendResponse) {
switch (request.cmd) {
case "readIds":
console.log("readIds", request);
//TODO: Get real values to send from page
//e.g. document.getElementById("someid") etc
sendResponse({refCode:1, productCode: 2, productName: 3});
break;
}
});
mainfest.json
{
// Required
"name": "Foo Extension",
"version": "0.0.1",
// Recommended
"description": "A plain text description",
"icons": { "48": "foo.png" },
//"default_locale": "en",
// Pick one (or none)
"browser_action": {
"default_icon": "Foo.png", // optional
"default_title": "Foo Extension", // optional; shown in tooltip
"popup": "popup.html"
},
"permissions": [ "http://*/", "https://*/", "tabs" ],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content_script.js" ],
"run_at": "document_idle"
}
]
}
See documentation: http://code.google.com/chrome/extensions/messaging.html
Related
I am trying to create my first extension where I want to send a message from contentScript to popup.js script but the message is not received.
background.js
chrome.runtime.onInstalled.addListener(function() {
chrome.webNavigation.onCompleted.addListener(function() {
chrome.browserAction.setPopup({popup: 'popup.html'});
chrome.tabs.executeScript({
file: 'contentScript.js'
});
}, {url: [{hostSuffix : 'domain.com'}]});
});
contentScript.js (here tried to put it outside of the load script but didn't help)
var s = document.createElement('script');
s.src = chrome.extension.getURL('script.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
s.remove();
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
return true;
});
};
popup.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>HI</h1>
<section id='red'></section>
<script src="popup.js"></script>
</body>
</html>
popup.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log("HEREEEE");
document.getElementById("red").innerHTML += "Hello";
}
);
Manifest
{
"name": "new extension",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["activeTab", "cookies", "sessions", "declarativeContent", "webNavigation", "http://*/*", "https://*/*"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"icons": {
"16": "images/get_started16.png",
},
"manifest_version": 2,
"web_accessible_resources": [
"script.js"
]
}
background.js is waiting for a page to be fully loaded, then execute contentScript and setPopup for browserAction popup.html - there is script for popup.js. The contentScript will execute another script and will send a message. The popup.js is listening for the message but it never arrive. Do you know why? Is it because of the background.js events?
My intention is to wait for certain page (can't use pageAction because it does not allow me to add badget) and then update the extension popup with appropriate content.
So I was working on basic example and here is my requirement for chrome extension : The extension should be able to read the data from webpage and display it on the popup when icon clicked upon.
I have these files - manifest.json , popup.html , background.js , content.js , webPage.html (this is html file stored at my local machine and data is to be read from this page)
manifest.json
{
"name": "Test",
"version": "1.0",
"description": "Testing",
"permissions": ["file:///A:/Study/TestExt/webp.html"],
"content_scripts": [
{
"matches": ["file:///A:/Study/TestExt/webp.html"],
"js": ["content.js"]
}
],
"background": {
"persistent": true,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html
<html>
<head>
<script src= "background.js"></script>
</head>
<body>
<p id="writeWord"></p>
</body>
</html>
webp.html
<html>
<body>
<div >
<p id="readWord">WordToBeRead</p>
</div>
</body>
</html>
content.js
var innerText = document.getElementById("readWord").innerHTML;
var k = new Object();
k.textWord = innerText;
chrome.runtime.sendMessage(k, function(response) {
console.log("hello");
});
background.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log(sender.tab ?
"from a content script:" + sender.tab.url :
"from the extension");
if (request.textWord == "WordToBeRead")
document.getElementById("writeWord").innerHTML = request.textWord;
});
So ideally when I click on extension icon I should get popup with word "WordToBeRead" but I am getting only empty popup. I can't figure it out where exactly I am going wrong.
I am making a chrome extension where I want to take user input in the popup and fill the textbox of a page. I have the following code but the data from the popup does not reach the content script.
Manifest.json
{
"manifest_version": 2,
"name": "Copy from popup to current tab",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"storage"
],
"content_scripts": [{
"js": ["content.js"],
"matches": ["*://*/*"],
"run_at": "document_end"
}]
}
Popup.html
<!DOCTYPE html>
<html>
<head>
<title>Copy from popup to webpage</title>
<script src="popup.js"></script>
</head>
<body>
<input type= "text" id = "inp" height='50' width = '200'></input>
<button id="send">Click Me</button>
</body>
</html>
Popup.js
window.onload = function(){
document.getElementById('send').onclick=LogIn;
}
function LogIn(){
var data = document.getElementById('inp').value;
chrome.storage.local.set({
data : data
},function(){
chrome.tabs.executeScript({
file: "content.js"
});
}
);
}
Content.js
chrome.storage.local.get('data',function(items){
var gotdata = items.data;
chrome.storage.local.remove('data');
});
I've spent hours and hours trying to figure out what's wrong with my chrome extension. I know that my function.js code is good because it works with an html page that I link it to, but perhaps it isn't right for chrome extensions?
All help is appreciated
manifest.json
{
"manifest_version": 2,
"name": "Font Find",
"description": "This extension allows you to click on any text, and find out what font it is written in.",
"version": "1.0",
"background": {
"page": "popup.html",
"persistent": true
},
"permissions": [
"activeTab",
"http://*/*",
"https://*/*"
],
"browser_action": {
"default_title": "Find the Font",
"default_icon": "icon.png"//,
// "default_popup": "popup.html"
},
"background": { "scripts": ["jquery.min.js"] },
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"function.js"
]
}
]
}
popup.html file (note it isn't set as the popup)
<!DOCTYPE HTML>
<html>
<head>
<!-- <link rel="stylesheet" href="popup.css"/> -->
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
<script src="function.js"></script>
</head>
</html>
function.js file
"use strict";
$("body").append('Test');
document.body.ondblclick = function(event){
//event.stopPropagation();
var target = event.target || event.srcElement;
alert( "What you clicked on:" + $(target).text() + " It's font-family is: " + $(target).attr("font-family") );
}
function.js file
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript({
file: "function.js"
});
});
First, edit the manifest.json file. Add this code:
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"
], "js": [
"jquery.min.js",
"function.js"
], "run_at": "document_start"
}]
And now, use this code in function.js file.
document.addEventListener("DOMContentLoaded", function() {
document.body.addEventListener("dblclick", function(e) {
var target = e.target;
alert("What you clicked on: " + $(target).text() + " It's font-family is: " + $(target).attr("font-family"));
}, true);
});
I tested this code and it works. I hope it helps.
I'm trying to create a chrome extension to learn front-end technologies, and got stuck on message passing between popup and content script.
The following is what I'm trying to do:
1. Let background page hold a global var.
2. When user clicking a button on the popup html, the global var is modified. Meanwhile, the popup sends the global var to the content scripts for all of the tabs.
In the background.js I have:
var settings = {
version: 1,
enabled: false
};
popup.js:
$(document).ready(function(){
$("#switcher").click(function( event ) {
event.preventDefault();
var bg = chrome.extension.getBackgroundPage();
var settings = bg.settings;
settings.enabled = !settings.enabled;
// send message to the content for all the tabs
chrome.tabs.query({active: true}, function (tabs) {
for (var i = 0; i < tabs.length; ++i) {
console.log("sending message to tab " + i);
chrome.runtime.sendMessage(tabs[i].id, {enabled: settings.enabled}, function(response) {
console.log(response);
});
}
});
});
});
Finally, the content.js:
$(document).ready(function(){
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
console.log("request is: " + request.enabled);
sendResponse("get it");
}
);
});
I tried to debug it, but I found the 'sendMessage' function never got returned back.. and the 'onMessage' never got triggered. Did I miss something?
My manifest file:
{
"name": "__MSG_appName__",
"version": "0.0.1",
"manifest_version": 2,
"description": "__MSG_appDescription__",
"icons": {
"16": "images/icon-16.png",
"128": "images/icon-128.png"
},
"default_locale": "en",
"permissions": [
"contextMenus", "storage", "tabs"
],
"background": {
"scripts": [
"scripts/background.js"
],
"persistent": true
},
"browser_action": {
"default_icon": {
"19": "images/icon-19.png",
"38": "images/icon-38.png"
},
"default_popup": "popup.html"
},
"content_scripts": [
{
"run_at":"document_start",
"all_frames":true,
"matches": ["*://*/*"],
"js": ["bower_components/jquery/dist/jquery.min.js", "scripts/content.js"]
}
],
"web_accessible_resources": ["bower_components/jquery/dist/jquery.min.map"]
}
You should be using chrome.tabs.sendMessage instead of chrome.runtime.sendMessage to send messages to content scripts in tabs.