Here is my manifest
{
"manifest_version": 2,
"name": "test",
"description": "test",
"version": "1.0",
"permissions": [
"activeTab",
"tabs"
],
"browser_action": {
"default_popup": "index.html"
},
"background": {
"scripts": ["background.js"]
}
}
In my index.html I have:
<html>
<head>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
</div>
</body>
</html>
and in my script.js I have:
var Chat = function( username, avatar) {
username = username || "";
/// more lines
}
Is there a way I call the Chat(index.html) in my backround.js
ex:
chat = new Chat("john", "");
A more generic question would be: How does popup and background can speak together ? With messaging ? any available sample ?
Related
I'm trying to develop a google chrome extension which can block specific URL. For this with the help of google I've made following code, but the code is not work perfectly.
The code :
manifest.json
{
"manifest_version": 2,
"name": "Zitu-LinkBlocker",
"description": "A link blocker extension!",
"permissions": [
"tabs"
],
"version": "1.0",
"icons": {
"128": "icon128.png",
"48": "icon48.png",
"16": "icon16.png"
},
"browser_action": {
"default_icon": "icon16.png",
"default_popup": "popup.html"
}
}
popup.js
$(document).ready(function() {
chrome.tabs.query(null, function (tab) {
var link = document.createElement('a');
link.href = tab.url;
$('#host').html("Host : "+link.hostname);
})
});
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
min-width: 357px;
overflow-x: hidden;
}
</style>
<script src="jquery-3.5.1.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
Yo Man
<div id="host"></div>
</body>
</html>
I think you need to pass { active: true, currentWindow: true } instead of null in chrome.tabs.query method. The tab parameter inside the callback will be an array and you need to access the URL using tab[0].url.
manifest.json
{
"manifest_version": 2,
"name": "Zitu-LinkBlocker",
"description": "A link blocker extension!",
"permissions": [
"tabs"
],
"version": "1.0",
"browser_action": {
"default_popup": "popup.html"
}
}
popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
min-width: 357px;
overflow-x: hidden;
}
</style>
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
Yo Man
<div id="host"></div>
</body>
</html>
popup.js
$(document).ready(function () {
chrome.tabs.query({ active: true, currentWindow: true }, (tab) => {
console.log(tab)
var link = document.createElement('a');
link.href = tab[0].url;
$('#host').html("Host : " + link.hostname);
});
});
I want to extract the title and URL of the web page of my current active tab.
I'm getting error --( Error in response to tabs.query: TypeError: "#lol".text is not a function
)
I tried this
(manifest)
{
"manifest_version": 2,
"name": "My Launcher",
"description": "Quick launch lol Media",
"version": "1.0.0",
"icons": { "128": "icon_128.png" },
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": ["activeTab"],
"background": {
"scripts": ["popup.js"],
"persistent": false
}
}
(popup.html)
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="popup.js">
</script>
<script src="jquery-3.3.1.min">
</script>
</head>
<body>
<h2 id="greet">mc</h2>
<h3 id="lol">url</h3>
<h4 id = "card"></h4>
</body>
</html>
(popup.js)
chrome.tabs.query({"active": true, "currentWindow": true},
function (tabs)
{
var tabURL = tabs.url;
('#lol').text(tabURL);
});
I want to show the URL in popup when the user clicks on the extension icon.
Total newbie here.
I'm trying to create a very simple chrome extension. Its main functionality is to change its BadgeText depending on some API endpoint response. I want to check the endpoint every 5 seconds so I want to run it in the background. Here is what I've got:
manifest.json:
{
"manifest_version": 2,
"name": "BusyIndicator",
"description": "busy indicator",
"version": "1.0",
"background": ["background.js"],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": []
}
popup.html:
<!doctype html>
<html>
<head>
<title>BusyIndicator</title>
<script src="popup.js"></script>
</head>
<body>
<h3>nothing here yet</h3>
</body>
</html>
popup.js is just an empty file right now
background.js:
setInterval(function() {
fetch('https://toiletbusy.herokuapp.com/')
.then(function(response) {
if (response.json.busy == false) {
chrome.browserAction.setBadgeText({text: 'BUSY'});
} else {
chrome.browserAction.setBadgeText({text: 'FREE'});
};
});
}, 5000);
I tried different things but it looks like background.js is not getting executed at all (e.g. console.log does not log anything)
I am trying to open a new tab from a chrome extension. I searched here but nothing I've found seem to solve this.
I simply want it to open a tab on a button click.
manifest
{
"manifest_version": 2,
"name": "TestExtension",
"description": "La LA LA",
"version": "1.0",
"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"activeTab",
"tabs"
]
}
popup.html:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div id="main" class="container">
<button class="btn btn-success" id="doItBtn">Do it NOW!
</body>
</html>
background.js
document.addEventListener('DOMContentLoaded', function () {
var btn = document.getElementsById("doItBtn");
btn.addEventListener('click', function () {
chrome.tabs.create({active: true, url: "http://www.ynet.co.il"});
});
});
I tried not putting the code in a backgorund.js but simple script tag instead but didn't work to.
What did I do wrong?
Regards,
Ido
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.