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

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

Related

Edge extension to rename tab title not working

I am trying to write an Edge extension that changes the title of a tab.
Here is what I've tried but it doesn't seem to change the tab's title.
When I add alert(tab.title) it does seem like it has changed.
Manifest.json
{
"name": "My Tab",
"version": "2.0.0",
"description": "Simple Microsoft Edge Extension",
"manifest_version": 2,
"author": "abc",
"browser_action": {
"default_popup": "bg.html",
"default_title": "Hello World"
},
"permissions": [
"tabs",
"<all_urls>"
],
"background": {
"page": "bg.html",
"persistent": true
}
}
bg.html
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
</head>
<body>
<div>
<h3>Click the button to get the page URL...<h3><br>
<button id="btn1">click me</button>
<input type="text" id="txt1" style="width:300px">
</div>
<script type="text/javascript" src="background.js"></script>
</body>
</html>
background.js
var btn= document.getElementById("btn1");
btn.addEventListener("click", function(){
abc();
});
function abc()
{
chrome.tabs.query({active: true, lastFocusedWindow: true}, function(tabs)
{
var tab = tabs[0];
var title = document.getElementById("txt1").value;
tabs[0].title = title;
tab.reload();
});
}
Any idea?
Here's how I change the tab's title. It involves a content script. Also, I used sendMessage in background.js to pass the title into content script. Don't forget to add the content script to your manifest.json.
content.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
if (request.title)
{
document.title = request.title;
}
})
background.js
var btn = document.getElementById("btn1");
btn.addEventListener("click", function(){
abc();
});
function abc()
{
chrome.tabs.query({active: true, lastFocusedWindow: true}, function(tabs)
{
var tab = tabs[0];
var title = document.getElementById("txt1").value;
chrome.tabs.sendMessage(tabs[0].id, {title: title}, function(response){});
});
}
manifest.json
{
"name": "My Tab",
"version": "2.0.0",
"description": "Simple Microsoft Edge Extension",
"manifest_version": 2,
"author": "abc",
"browser_action": {
"default_popup": "bg.html",
"default_title": "Hello World"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"permissions": [
"tabs",
"<all_urls>"
],
"background": {
"page": "bg.html",
"persistent": true
}
}

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

Receiving end does not exist : sendMessage Background To popup

I searched for 1 hour my answer but nothing that fits my issue. I apolagize if it was a common problem. So I have one popup script that have to wait a message from the Background. But I always get this error
Error : Could not establish connection. Receiving end does not exist.
here is my popup
$( document ).ready(function()
{
chrome.extension.getBackgroundPage().download(true, "test");
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
console.log(request, sender, sendResponse);
});
});
and here is my background which is a part of my http request
if(this.readyState ==3 && this.status ==200)
{
chrome.tabs.query({active: true, currentWindow: true},function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, "Loading", function(response) {
console.log(response);
});
});
}
and here is my manifest
`{
"name": "My extension axel",
"version": "1.0",
"description": "first extension",
"icons":{
"16":"/images/ytDownloader_image_16.png",
"48":"/images/ytDownloader_image_48.png",
"128":"/images/ytDownloader_image_128.png"
},
"permissions": [
"activeTab",
"tabs",
"webRequest",
"webNavigation",
"management",
"http://*/*",
"https://*/*",
"*://*.google.com/"
],
"browser_action": {
"default_popup" :"popup.html"
},
"background":{
"scripts":["/js/jquery-3.5.1.min.js","background.js"],
"persistent": true
},
"manifest_version": 2
}`
Please help me :)

chrome extension to Send Message from popup to content script

I,am developing an extension in which i have to extract data from linkedin profile page when user press button on popup. I,am passing message from the popup.js page to contentscript and in response i will get data extracted from linkedin profile page by contentscript so that i can display it in popup.html. But I,am getting error when i inspected the popup.html. The error is:
Port: Could not establish connection. Receiving end does not exist. lastError:29
Error in event handler for 'undefined': Cannot read property 'farewell' of undefined
TypeError: Cannot read property 'farewell' of undefined
at chrome-extension://kdfgoafjicddfffdbfofdmckejemfije/popup.js:6:25
at <error: illegal access>
at Event.dispatchToListener (event_bindings:356:21)
at Event.dispatch_ (event_bindings:342:27)
at Event.dispatch (event_bindings:362:17)
at Object.chromeHidden.Port.dispatchOnDisconnect (miscellaneous_bindings:258:27)
For reference, my manifest file is:
{
"name": "SoftwareGrid",
"version": "0.5",
"icons": { "16": "icons/16.png","48": "icons/48.png", "128": "icons/128.png" },
"description": "Shows user cresidentials on Linkedin",
"permissions": [
"cookies",
"tabs",
"http://www.linkedin.com/*"
],
"browser_action": {
"default_title": "Show Profile",
"default_icon": { "16": "icons/16.png","48": "icons/48.png", "128": "icons/128.png" },
"default_popup": "popup.html"
},
"background": {
"scripts": ["jquery-1.7.2.min.js","background.js"]
},
"content_scripts": [{
"matches": ["http://www.linkedin.com/*"],
"all_frames": true,
"js": ["jquery-1.7.2.min.js", "script.js"],
"run_at": "document_end"
}],
"web_accessible_resources": [
"icons/i1.png"
],
"manifest_version": 2
}
My popup.js file:
function sendClicks() {
console.log("popup.js > sendClicks()");
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
console.log("avra' inviato?");
}
$(function() {
console.log("popup.js > OMD Extension ready");
$('#sendclicks').click(function(){
sendClicks();
});
});
My contentscript file
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"});
});
Plz help!
You may have to add this in your manifest:
"permissions" : ["tabs"]

Google Chrome. Extension develompent

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>

Categories