Google Chrome. Extension develompent - javascript

All day long i'm trying to make this work, but nothing. Why, tell me pls, why is this ##!*> dont want to work?
Manifest.json
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"permissions": [
"tabs"
],
"content_scripts": [
{
"matches" : ["http://*/*"],
"js": ["contentscript.js"]
}
]
}
popup.html
<script src="contentscript.js"></script>
<script>
function get(){
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension");
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
else
sendResponse({}); // snub them.
});
}
get();
</script>
contentscript.js
function send(){
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
}
send();
This show me:
Uncaught TypeError: Cannot call method 'getSelected' of undefined
Uncaught TypeError: Cannot read property 'onRequest' of undefined

Thx, god. I did it. Dont forget change manifest from "file" to "http".
manifest.json
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"permissions": [
"tabs"
],
"content_scripts": [
{
"matches": ["file:///*"],
"js": ["dom.js"]
}
]
}
dom.js
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.action == "getDOM")
sendResponse({dom: document.body.innerHTML});
else
sendResponse({}); // Send nothing..
});
popup.html
<html>
<head>
<style type="text/css">
body
{
min-width: 357px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
chrome.tabs.getSelected(null, function (tab) {
// Send a request to the content script.
chrome.tabs.sendRequest(tab.id, { action: "getDOM" }, function (response) {
alert(response.dom);
});
});
});
</script>
</head>
<body>
<h4>Hello, world!</h4>
</body>
</html>

Related

How to send event from action to content and clear LocalStorage Chrome Extension? [duplicate]

I am making an extension and want to pass the message from the popup.html to content.js but the following code alert undefined. Please give me a simple script that send message from popup.html to content.js and vice versa, further i will handle it. I want to access the DOM through this extension for modifying and designing the website layouts.
Manifest
{
"manifest_version": 2,
"name": "Extension",
"description": "Description",
"version": "1.0",
"background": {
"scripts": ["background.js"],
"persistent": true
},
"content_scripts": [{
"matches": ["*"],
"js": ["content.js"]
}],
"browser_action": {
"default_icon": "icons/icon.png",
"default_popup": "popup.html"
},
"permissions":["tabs"]
}
popup.js
document.addEventListener('DOMContentLoaded',function(){
document.getElementById('button').onclick=function(){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
alert(response);
});
});
}
});
Content.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.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
Try this simple code.
manifest.json
{
"name": "test",
"version": "0.1",
"manifest_version": 2,
"description": "Test Extension",
"permissions": [ "tabs" ],
"browser_action": {
"default_popup": "popup.html"
},
"content_scripts" : [{
"matches" : ["*://*/*"],
"js" : ["content.js"]
}]
}
popup.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="data"></div>
<input type="text" id="text"></input>
<button id="set">Set</button>
<script src="popup.js"></script>
</body>
</html>
>
popup.js
document.getElementById("set").onclick = function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
alert(response.farewell);
});
});
}
content.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.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
alert

I want to do message passing from web page to chrome extension html but seems no response is coming. Here is the code

Below is the code m trying but getting response null in popup. I want to do message passing from web page to chrome extension html .
mainfest.json
{
"manifest_version": 2,
"name": "AnyName",
"description": "A simple extension for Chrome",
"version": "1.0",
"author": "#aag",
"background": {"scripts": ["background.js"]},
"permissions":[
"tabs", "http://*/*", "activeTab", "storage", "ftp://*/*", "<all_urls>", "clipboardWrite", "contentSettings", "cookies", "history"
],
"page_action": {
"default_icon": "logo.png" ,
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["*://*/show_bug.cgi?id/*"],
"js": ["content.js"],
"run_at": "document_start"
}]
}
popup.html
<!doctype html>
<html>
<head>
<title>Extension</title>
<script src="popup.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<h3>Whiteboard!!</h1>
<p id='pagetitle'>Page is still Loading..</p>
<p id='reported'>Date is still Loading..</p>
</body>
</html>
popup.js
document.addEventListener('DOMContentLoaded', function() {
prepareSummary();
});
function prepareSummary() {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {
action: "getSummary"
}, function(response) {
if (response == null) {
alert('no respose');
} else {
var wbVar = response.wb;
var rdateVar = response.rd;
document.getElementById('pagetitle').innerHTML = wbVar;
document.getElementById('reported').innerHTML =rdateVar ;
}
});
});
}
content.js
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.action == "getSummary") {
var wbVar = document.getElementById('status_whiteboard').value;
var rdateVar = document.getElementsByClassName("bz_comment_time")[0].innerText;
sendResponse({
wb: wbVar,
rd: rdateVar,
resp: "Test"
});
} else
sendResponse({
resp: "Nothing"
});
});
background.js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
var url = tab.url;
if (isUrl(url)) {
chrome.pageAction.show(tab.id);
}
});
function isUrl(url) {
if (url.includes('show_bug.cgi?id'))
return true;
else
return false;
}
The main issue is i am not able to get the string coming on webpage. After fetching from webpage i need to show on extension popup.html

Messages not exchanged between content scripts, background.js and popup.js

I am trying to make a google-chrome extension which fetches selected text from the webpage and displays it in the popup. I've read google-chrome docs and have followed many questions but I have been unable to resolve this issue. Selected text cannot be sent to background.js and furthur to popup.js.
manifest.json:
{
"name": "Wordomania",
"version": "1.0",
"manifest_version": 2,
"description": "Displays word on popup",
"icons": {
"16": "images/W.png"
},
"background": {
"scripts": [
"jquery-3.3.1.js",
"background.js"
],
"persistent": false
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["content.js"]
}
],
"permissions": [
"background",
"tabs",
"http://*/*",
"https://*/*",
"activeTab"
],
"browser_action": {
"default_icon": "images/W.png",
"default_title": "Wordomania"
}
}
background.js :
chrome.browserAction.onClicked.addListener(function (tab) {
console.log('Extension button clicked');
chrome.tabs.sendMessage(tab[0].id, {
action: 'sendWord'
}, function (wordObject) {
console.log('Word received');
let obj = {
word: wordObject.word,
from: 'back'
};
chrome.runtime.sendMessage(obj, function (status) {
console.log(status);
});
});
});
content.js :
function getSelectionText() {
let text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type !== 'Control') {
text = document.selection.createRange().text;
}
return text;
}
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
if (message.action === 'sendWord') {
let text = getSelectionText();
sendResponse({word: text});
}
});
popup.html :
<!DOCTYPE html>
<html>
<head>
<title>Wordomania</title>
<script src="popup.js"></script>
</head>
<body>
<h1><p id="word"></p></h1>
<div id="body-of-popup"></div>
</body>
</html>
Help required!
Basically, you will need to do a few changes in your approach. Since, we can have only one event at a time assoiciated with the browserAction either popup or chrome.browserAction.onClicked. In your case you have a popup assoiciated so you can not use chrome.browserAction.onClicked.
But still you can achieve what you want using the code below.
// Add below code in your popup.js
document.body.onload = function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "sendWord"}, function(response) {
alert(response.word);
});
});
};
Let the your content.js file as is.
manifest.json
"browser_action": {
"default_icon": "images/W.png",
"default_popup": "popup.html",
"default_title": "Wordomania"
}
Hope this will solve your problem.

How to send the message from popup.html to content script?

I am making an extension and want to pass the message from the popup.html to content.js but the following code alert undefined. Please give me a simple script that send message from popup.html to content.js and vice versa, further i will handle it. I want to access the DOM through this extension for modifying and designing the website layouts.
Manifest
{
"manifest_version": 2,
"name": "Extension",
"description": "Description",
"version": "1.0",
"background": {
"scripts": ["background.js"],
"persistent": true
},
"content_scripts": [{
"matches": ["*"],
"js": ["content.js"]
}],
"browser_action": {
"default_icon": "icons/icon.png",
"default_popup": "popup.html"
},
"permissions":["tabs"]
}
popup.js
document.addEventListener('DOMContentLoaded',function(){
document.getElementById('button').onclick=function(){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
alert(response);
});
});
}
});
Content.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.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
Try this simple code.
manifest.json
{
"name": "test",
"version": "0.1",
"manifest_version": 2,
"description": "Test Extension",
"permissions": [ "tabs" ],
"browser_action": {
"default_popup": "popup.html"
},
"content_scripts" : [{
"matches" : ["*://*/*"],
"js" : ["content.js"]
}]
}
popup.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="data"></div>
<input type="text" id="text"></input>
<button id="set">Set</button>
<script src="popup.js"></script>
</body>
</html>
>
popup.js
document.getElementById("set").onclick = function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
alert(response.farewell);
});
});
}
content.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.greeting == "hello")
sendResponse({farewell: "goodbye"});
});
alert

No action in passing simple message from popup.html to background.js

I'm new to chrome extension coding and relatively new to javascript. The extension is of the type page_action . I'm trying to send a simple message to background.js on click of button in popup.html. I've seen similar questions on this site, however nothing seems working. The loading of the extension is fine. please help
/* __background.js__ */
function checkForValidUrl(tabId, changeInfo,tab){
console.log("Extension loaded");
chrome.pageAction.show(tabId);
}
function readMessage (request, sender, sendResponse){
alert("reached");
console.log(request.greeting);
sendRequest({farewell:"goodbye"});
}
chrome.extension.onRequest.addListener(readMessage);
chrome.tabs.onUpdated.addListener(checkForValidUrl);
/* __manifest.json__ */
{
"name": "DemoExtension",
"version": "1.0",
"manifest_version": 2,
"background": {
"scripts": [
"jquery.js",
"background.js"
]
},
"description": "demo extension to learn coding chrome extensions.",
"icons": {
"16": "images/16x16.png",
"48": "images/48x48.png",
"128": "images/128x128.png"
},
"page_action": {
"default_icon": {
"19": "images/19x19.png",
"38": "images/38x38.png"
},
"default_title": "Demo extension",
"default_popup": "popup.html"
},
"options_page": "options.html",
"permissions": [
"tabs",
"storage",
"http://*/*",
"https://*/*"
]
}
-
__popup.html__
<!DOCTYPE HTML>
<html>
<head>
<title>Demo extension</title>
<script src="./popup.js"></script>
</head>
<body>
<button id="clickMe">Add</button>
</body>
</html>
-
__popup.js__
function sendMessageToExtn() {
alert("reached in popup");
chrome.extension.sendMessage({
greeting : "hello" },
function(response) { console.log(response.farewell);
});
}
document.getElementById('clickMe').addEventListener('click', function () {
sendMessageToExtn();
});
I'm now getting error Uncaught TypeError: Cannot call method 'addEventListener' of null (anonymous function)
There is a similar question .
Solved the problem. Firstly incorporating the suggestions by #apsillers. Then finally by moving the
<script src="./popup.js"></script>
in the body from the head, below the button tags.

Categories