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
Related
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)
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');
});
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 ?