Edge extension to rename tab title not working - javascript

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
}
}

Related

How to start google extension on tab switch

I have made a simple extension that checks if a URL is on a list. If it is the extension icon changes color for 2 seconds.
I would like it to automatically switch the icon color on tab switch instead of me having to click the extension icon.
This is my current code :
var good_urls = \["https://www.google.com/%22,%22https://www.youtube.com"\];
var currentURL
chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
function(tabs){
getCurrentURL(tabs\[0\].url);
updateIcon();
});
function getCurrentURL(tab){
currentURL = tab;
console.log(currentURL);
}
function updateIcon(){
if(good_urls.indexOf(currentURL) >= 0) {
console.log("good");
chrome.action.setIcon({path: "icon-on-list.png"});
console.log("1")
setTimeout(() => { chrome.action.setIcon({path: "neutral.png"}); }, 1000);
}
else {
chrome.action.setIcon({path: "icon.png"});
console.log("3")
setTimeout(() => { chrome.action.setIcon({path: "neutral.png"}); }, 1000);
};
}
+HTML that activates the script
<html>
<head>
</head>
<body>
<script src="background.js"></script>
</body>
</html>
+Manifest
{
"manifest_version": 3,
"name": "Icon Changer",
"version": "1.0",
"background": {
"service_worker": "background.js"
},
"permissions": [
"tabs",
"activeTab",
"declarativeContent",
"storage"
],
"action": {
"default_icon": "neutral.png",
"default_popup": "popup.html"
}
}
I have no clue how to make the script start automatically.
I am sure its super simple, I am new to making chrome extensions. Thank you for your help.
This is a sample of chrome.tabs.onActivated.
manifest.json
{
"name": "hoge",
"version": "1.0",
"manifest_version": 3,
"permissions": [
"tabs"
],
"background": {
"service_worker": "background.js"
}
}
background.js
console.log("background.js");
chrome.tabs.onActivated.addListener((activeInfo) => {
chrome.tabs.get(activeInfo.tabId, (tab) => {
console.log(tab.url);
});
});

How can I get the URL of the current tab from a Microsoft Edge extension

I'm experimenting with edge extensions , I'm trying to make one that reads the URL of the current tab, removes the string '%0A' and then redirects to the cleaned URL, but I dont know how to read the current tab URL, I found how to do it in chrome:
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
// print object for debugging
console.log(JSON.stringify(tabs[0]));
// get active tab url
var activeTab = tabs[0];
var activeTabURL = activeTab.url;
alert(activeTabURL)
});
but It doesnt seem to work for Edge, I have the permission for 'tabs' set in my manifest.
Hope you can help me out
I suggest you refer to an example below that may help you to get the URL of the current tab from the Edge browser extension.
manifest.json:
{
"name": "Hello World",
"version": "2.0.0",
"description": "Simple Microsoft Edge Extension",
"manifest_version": 2,
"author": "abc",
"icons": {
"16": "icons/icon_16.png"
},
"browser_action": {
"default_popup": "background.html",
"default_title": "Hello World"
},
"permissions": [
"tabs",
"<all_urls>"
],
"background": {
"page": "background.html",
"persistent": true
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"css" : ["light.css"],
"js": ["js/content.js"],
"run_at": "document_end"
}
]
}
background.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="js/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];
document.getElementById("txt1").value= tab.url;
});
}
The extension file structure looks like below. You can create other files by yourself(like CSS files etc).
Test result with the MS Edge 89.0.774.45:
Further, you can try to modify the code of the extension as per your own requirements.
Thanks for your understanding.

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 Append Content to Current Page (Active Tab) DOM Using Chrome Extention

I am trying to add some content to active document(Active tab) by Chrome extension. Here is what I have:
popup.html
<button class="btn btn-default" id="clear" type="submit"></button>
popup.js
$('#clear').on('click', function () {
$('tr').eq(0).append("Some Test");
});
and manifest.json
{
"manifest_version": 2,
"name": "Adder",
"description": "Adding Content",
"version": "1.0",
"background" : {
"scripts" : ["jquery.min.js","popup.js"],
"persistent": false
},
"content_scripts": [ {
"js": [ "jquery.min.js", "popup.js"],
"matches": [ "http://*/*", "https://*/*"]
}],
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"activeTab"
]
}
Update
$('#clear').on('click', function () {
chrome.tabs.executeScript({ code:
'document.body.style.backgroundColor="red"' });
alert("test");
});

Chrome extension - how to pass the values to background page

I have a small assignment.I need help on that..i am new to this stackoverflow..
The problem is of my extension..i have tried many methods in various tutorials and articles..
i need to achieve this.
I have an extension and when i click on it ,it should capture the current url of the page and open a new tab with the url and the source code (html structure) of the page..both the sourcecode and url must be stored somewhere .. like in an object or something..
So far i have done this.
manifest.json
{
"name": "ncubicx",
"version": "0.0.1",
"manifest_version": 2,
"browser_action": {
"default_icon": {
"19": "img/19x19.png",
"38": "img/38x38.png"
},
"default_title": "That's the tool tip"
},
"permissions": [
"activeTab",
"tabs",
"cookies",
"contextMenus",
"<all_urls>"
],
"background": {
"scripts": ["background.js"],
"persistent": true
}
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
var url = tabs[0].url;
});
chrome.tabs.create({url: 'newtab.html'}) ;
});
I dont know how to display the url in newtab.html or how to store the url's somewhere.
Hope someone helps me in this..
Thanks in advance..
You can capture the url of tab from background page and html source code from content script. Once you have both, open a new tab and send the object to this new tab where you can populate the html by yourself.
Note : Before sending the object to new tab, you need to wait for tab to load. So i have added a check for that.
Here's the whole code:
manifest.json:
{
"name": "Demo",
"version": "0.0.1",
"manifest_version": 2,
"description": "practice",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"scripts": [
"src/bg/background.js"
],
"persistent": true
},
"browser_action": {
"default_icon": "icons/icon19.png",
"default_title": "browser action demo"
},
"permissions": [
"https://*/*","tabs"
],
"content_scripts": [
{
"matches": [
"https://*/*"
],
"js": [
"js/jquery/jquery.min.js",
"src/content/content.js"
]
}
]
}
background.js:
chrome.browserAction.onClicked.addListener(function(){
chrome.tabs.query({active: true,currentWindow: true}, function(tabs){
var url = tabs[0].url;
chrome.tabs.sendMessage(tabs[0].id, {message : "getHtml"},function(response){
var html = response.html;
var obj ={
tabUrl : url,
tabHtml : html
};
createNewtab(obj);
});
});
});
function createNewtab(obj){
var targetId = null;
chrome.tabs.onUpdated.addListener(function listener(tabId, changedProps) {
if (tabId != targetId || changedProps.status != "complete")
return;
chrome.runtime.sendMessage({message: "loadNewTab", data: obj});
});
var newTabUrl = chrome.extension.getURL('newTab.html');
chrome.tabs.create({ url: newTabUrl}, function(tab) {
targetId = tab.id;
});
}
content.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
switch (request.message){
case "getHtml":
var src = $("html").html();
sendResponse({html: src});
break;
}
});
newTab.html:
<html>
<head>
<script src="src/newTab.js"></script>
</head>
<body>
//You can populate data as you like
</body>
</html>
newTab.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
switch (request.message){
case "loadNewTab":
console.log(request.data);
//You have the object as request.data with tabUrl and tabHtml
break;
}
});

Categories