Edge extension to rename tab title not working-CodePudding

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?

CodePudding user response：

It looks like you're trying to write an extension for Microsoft Edge, but you're using the Chrome tabs API. Microsoft Edge uses its own extension API, which is different from the Chrome tabs API.

To change the title of the active tab in Microsoft Edge, you can use the browser.tabs.executeScript() method to execute some JavaScript code in the active tab. This code can then change the title of the page by setting the document.title property.

Here is an example of how you might do this:

browser.tabs.executeScript({
  code: "document.title = 'New Title';"
});

Note that this code should be run in the background script of your extension, not in the bg.html file.

Also, keep in mind that the browser object is only available in the background script of your extension. If you need to access it from other scripts, you can use the browser.runtime.getBackgroundPage() method to get a reference to the background script from those other scripts.

CodePudding user response：

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