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);
});
});
Related
I've seen a bunch of posts about this question, but none of the solutions seem to have worked for me. I have a simple manifest with a background, popup.html, and popup.js. It looks like the script isn't doing anything (just trying to get an alert). I'm trying to figure out if there's something I'm missing somewhere (and hoping I haven't just made a really stupid mistake).
manifest.json
{
"name": "ext",
"version": "1.0",
"description":"ext",
"permissions": ["declarativeContent", "activeTab"],
"background": {
"scripts": ["background.js"],
"persistent":false
},
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "16_px_icon.ico"
}
},
"icons": {
"16": "16_px_icon.ico"
},
"manifest_version": 2
}
background.js
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({saves:[]} );
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
popup.html
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 60px;
outline:none;
}
</style>
<script type="text/javascript" scr="popup.js" ></script>
</head>
<body>
<input type="text" id="Fd">
<button id="Btn">
Search</button>
<span id="Msg"></span>
</body>
</html>
popup.js
function search() {
alert('A')
}
window.onload = function() {
//document.getElementById('Btn').addEventListener('click', search); tried this
document.getElementById('Btn').onclick = search;
}
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.
I am unable to make 2 way communication between content script and popup.
I could make a communication with content script and hence alert "Message received is showing up"
But feedback alert "response received" is not showing up. But the "response received" alert is showing when I inspect popup and then click on the button.
My question is that why would I need to inspect popup to get feedback alert "response received"? How can I get response without inspecting popup?
Popup HTML
<!doctype html>
<html>
<head>
<title>activity</title>
<script src="jquery.js"></script>
</head>
<body>
<button id="clickactivity">click</button>
<script src="popup.js"></script>
</body>
</html>
Manifest json
{
"manifest_version": 2,
"name": "Such Activity",
"description": "Wow",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"tabs",
"http://*/*",
"https://*/",
"<all_urls>"
],
"content_scripts": [
{
"matches": [ "https://*/*", "http://*/*" ],
"js": [ "jquery.js", "content_script.js" ]
}
]
}
Popup HTML
<!doctype html>
<html>
<head>
<title>activity</title>
<script src="jquery.js"></script>
</head>
<body>
<button id="clickactivity">click</button>
<script src="popup.js"></script>
</body>
</html>
Popup JS
function injectTheScript() {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, { sender: "Hi" }, function (response) {
if (response.receiver == "Hello") {
alert("Response recieved");
}
});
});
}
document.getElementById('clickactivity').addEventListener('click', injectTheScript);
Content script JS
$(document).ready(function () {
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.sender == "Hi") {
alert("Message Received");
sendResponse({ receiver: "Hello" });
}
});
});
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 ?
Just trying to create a simple tab and I cannot get it to work. Any ideas what I am doing wrong?
manifest.json
{
"manifest_version": 2,
"browser_action": {
"default_icon": {
"19": "logo_19.png"
},
"default_title": "Test Suite",
"default_popup": "main.html"
},
"description": "Test Suite Description",
"icons": {
"128": "icon_128.png",
"16": "icon_16.png"
},
"name": "Test Suite",
"permissions": ["http://www.google.com/"],
"version": "1.0"
}
main.html
<html>
<head>
<script type="text/javascript" src="popup.js">
</script>
</head>
<body>
<div id="menu-items-ui">
<div id="registration">
Google Search
</div>
</div>
</body>
</html>
popup.js
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var registration = document.getElementById('registration');
registration.addEventListener('click', function() {
chrome.tabs.create({ url: 'http://www.google.com' });
});
});
</script>
It is not going to the google site.
Thanks in advance.
You have html in your javascript file, remove it
popup.js
document.addEventListener('DOMContentLoaded', function() {
var registration = document.getElementById('registration');
registration.addEventListener('click', function() {
chrome.tabs.create({ url: 'http://www.google.com' });
});
});