![如何在 Chrome 中显示网页的完整标题?](https://linux22.com/image/1632092/%E5%A6%82%E4%BD%95%E5%9C%A8%20Chrome%20%E4%B8%AD%E6%98%BE%E7%A4%BA%E7%BD%91%E9%A1%B5%E7%9A%84%E5%AE%8C%E6%95%B4%E6%A0%87%E9%A2%98%EF%BC%9F.png)
浏览器创建者很久以前就从标题栏中删除了页面标题,从而阻止用户检查正在查看的内容。
有人知道是否可以重新启用 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"
}
},