☰

如何在 Chrome 中显示网页的完整标题？

tag-icon • tag-icon google-chrome extension title-bar
如何在 Chrome 中显示网页的完整标题？

浏览器创建者很久以前就从标题栏中删除了页面标题，从而阻止用户检查正在查看的内容。

有人知道是否可以重新启用 Chrome 中的标题栏，或者是否有任何解决方法？

我有适用于 Windows 10 的 Chrome 84.0.4147.135。

这chrome://flags/#windows10-custom-titlebar标志不再存在？

这chrome://flags/#top-chrome-md走了

“设置/外观”中显示标准标题栏的选项也消失了。

答案1

要在 Chrome 中显示网页的完整标题，请将光标悬停在打开该页面的浏览器选项卡上。如果标题太长而无法在选项卡中显示，则会出现一个工具提示，显示完整标题。这可以帮助您阅读整个标题而无需打开新选项卡。

答案2

我编写了一个 chrome 扩展程序来解决了这个问题；不幸的是，它在任何地方都可以运行……但在 stackexchange 网站上除外！（以及任何禁止框架的网站）。（编辑：请参阅末尾的版本，了解适用于所有网站的情况）

对于简单的网站，它可以正常工作，显示标题和完整的网址，如果您有许多选项卡和许多扩展，通常两者都会被裁剪到不可接受的长度。

有用：

  • 打开新标签页时
  • 刷新标签时
  • 根据请求，点击其图标

清单.json：

{
  "name": "ShowTitle",
  "version": "1.0",
  "permissions": [
    "tabs"
  ],
  "description": "Show page title and url (titlebar replacement)",
  "background": {
    "persistent": false,
    "scripts": [
      "background.js"
    ]
  },
  "content_scripts": [
    {
      "matches": [
        "*://*/*"
      ],
      "js": [
        "content.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ],
  "browser_action": {
    "title": "Test"
  },
  "manifest_version": 2
}

background.js：

chrome.browserAction.onClicked.addListener(function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {command: "showTitle"}, function(response) {
            //console.log(response.result);
        });
    });
});

chrome.tabs.onCreated.addListener(function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {command: "showTitle"}, function(response) {
            //console.log(response.result);
        });
    });
});


chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
    if ((changeInfo.status == 'complete') && (tab.active)) {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {command: "showTitle"}, function(response) {
                //console.log(response.result);
            });
        });
    }
})

内容.js：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)    {
    console.log(request.command);
    if (request.command == "showTitle") {
        console.log("Adding title frame...");
        TITLE_HEIGHT = 60;

        // Create an iframe which contains title and URL
        frTitle = document.createElement("iframe");
        frTitle.setAttribute("src","")
        frTitle.setAttribute("width",window.innerWidth)
        frTitle.setAttribute("height",TITLE_HEIGHT)
        html = '<body><center style="background-color:#aaaaaa"><span>Title: ' +  document.title  + '</span><br><span>URL: ' + document.location + '</span></center></body>';
        blob = new Blob([html], {type: 'text/html'});
        frTitle.srcdoc = html;

        br = document.createElement("br");

        // Cretae a frame where to copy original page contents:
        frBody = document.createElement("iframe");
        frBody.setAttribute("src",window.location)
        frBody.setAttribute("width",window.innerWidth)
        frBody.setAttribute("height",window.innerHeight-TITLE_HEIGHT)

        orgBody = document.body; // Store original page

        // Create new body containing the two frames:
        newBody = document.createElement("body");
        newBody.appendChild(frTitle);
        newBody.appendChild(br);
        newBody.appendChild(frBody);

        // Replace original body by new one:
        document.body = newBody;

        //sendResponse({result: "success"});
    } else {
        console.log("Another command.");
    }
});

编辑：

为了使其在那些不允许框架的网站上也能正常工作，我必须在 background.js 中引入一个切换功能，通过鼠标单击来启用/禁用扩展：

var enable=false;

chrome.browserAction.onClicked.addListener(function() {

enable = enable ? false : true;
if(enable){
    //turn on...
    chrome.browserAction.setIcon({ path: 'showtitle_on.png' });
    chrome.browserAction.setBadgeText({ text: 'ON' });
    chrome.tabs.executeScript(null, { file: 'content.js' });
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {command: "showTitle"}, function(response) {
        //console.log(response.result);
            console.log("***ATTIVA***");
        });
    });
}else{
    //turn off...
    chrome.browserAction.setIcon({ path: 'showtitle_off.png'});
    chrome.browserAction.setBadgeText({ text: 'Off' });
            console.log("***NON ATTIVA***");
}


});

chrome.tabs.onCreated.addListener(function() {
    if(enable){
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {command: "showTitle"}, function(response) {
                //console.log(response.result);
            });
        });
    }
});


chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
    if(enable){
        if ((changeInfo.status == 'complete') && (tab.active)) {
            chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                chrome.tabs.sendMessage(tabs[0].id, {command: "showTitle"}, function(response) {
                    //console.log(response.result);
                });
            });
        }
    }
})

我还在Manifest.json中添加了默认的ON状态：

  "browser_action": {
    "default_title": "ShowTitle",
    "default_icon": {
        "16": "showtitle_on.png"
    }
  },

相关内容