我有一个奇怪的问题。让我尽可能地描述它:
设置:
点击扩展程序图标后,我有一个Google Chrome扩展程序会打开一个popup.html窗口。我在MacOS(最近的公共版本)和Windows(Windows 7 - 最近版本)中使用此扩展程序
问题:
大部分扩展只是文字。但是,在页面的末尾,有一个超链接。在没有显示太多细节的情况下,我在此处附上了截图(为阻止文本和功能而道歉)。
每当我点击扩展图标时,popup.html窗口就会打开到页面上超链接的位置(在底部)。并且超链接是聚焦的(就好像你有鼠标悬停在它上面 - 链接加下划线并突出显示元素)。
您可以从屏幕截图中看到 "来自..." 超链接的语句是重点突出的。我尝试了一个带有单个超链接的简单香草页面 - 页面向下滚动到链接,超链接自动聚焦。
我的css中没有任何自动对焦属性。
我采取了哪些措施进行问题排查
更多详情:
我只在MacOS(最近的Chrome版本)上发现了这个问题。我还在Windows 7上使用Chrome 55.0.2883.87进行了测试 - >此问题 不会发生 。 popup.html通常会在顶部打开。
问题:
为什么会出现此问题以及如何解决此问题的任何建议?
编辑 - 更详细信息
以下是 manifest.json 文件:
{
"update_url": "https://clients2.google.com/service/update2/crx",
"manifest_version": 2,
"name": "AppName",
"short_name": "AppShortName",
"description": "Extension Description",
"version": "0.0.0.6",
"homepage_url": "appURL",
"content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'",
"icons": {
"16": "16.png",
"48": "48.png",
"128": "128.png"
},
"background": {
"scripts": ["browser.js", "getTabSource.js", "eventPage.js"],
"persistent": false
},
"page_action": {
"default_icon": "icon4.png",
"default_popup": "popup.html",
"default_title": "TITLE"
},
"permissions": [
"storage",
"tabs",
"http://*/*",
"https://*/*",
"unlimitedStorage"
]
}
popup.html:
<html>
<head>
<title>Popup Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/style.css">
<script src="browser.js"></script> // Nothing significant is going on here
<script src="getTabSource.js"></script> //This does backend calls to my backend server and returns the result to popup.js. No UI work is here.
<script src="popup.js"></script> // All my UI work is here.
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/highcharts.js"></script>
</head>
<body>
<div class='header' id="header">
<div id="help" title="" type="" icon-help="">?</div>
<h1 id="banner">TITLE</h1>
<div><img class="headerImage" src="icons3/Line.png"></div>
<h3 id="title">subtitle</h3>
</div>
<div class="spinner" id="loading"></div>
<div class="bodyContainer" id="bodyId">content goes here (dynamically generated by DOM in popup.js
</div>
</body>
</html>
browser.js
if (typeof browser === 'undefined' && typeof chrome !== 'undefined') {
window.browser = chrome;
}
popup.js
function getCurrentTabUrl(callback) {
var queryInfo = {
active: true,
currentWindow: true
};
browser.tabs.query(queryInfo, function(tabs) {
var tab = tabs[0];
var url = tab.url;
console.assert(typeof url == 'string', 'tab.url should be a string');
callback(url);
});
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('a[href]').forEach(function (el) {
el.addEventListener('click', function (event) {
event.preventDefault();
browser.tabs.create({
url: event.target.getAttribute('href')
});
});
});
var responseCallBack = function(responseFromServer) {
var responseText = responseFromServer.response.toLowerCase();
switch(responseText) {
case "success":
processSuccessResponse(responseFromServer);
break;
case "error":
processErrorResponse(responseFromServer);
break;
}
};
var processSuccessResponse= function(appResponse) {
// creates the dom elements
// creates a div element with lots of text
// adds a link at the bottom
var headerContainer = document.createElement("div");
headerContainer.className = "headerContainer";
var aHeaderTitle = document.createElement("a");
aHeaderTitle.className = "aHeaderTitle";
var aHeaderText = document.createTextNode(appResponse.text);
aHeaderTitle.appendChild(aHeaderText);
aHeaderTitle.href = appResponse.link; // Page scrolls down and jumps to this link
headerContainer.appendChild(aHeaderTitle);
var bodyContainer = document.getElementById("bodyId");
bodyContainer.appendChild(headerContainer);
document.body.appendChild(bodyContainer);
};
});
编辑 - 找到解决方案
我知道我不会发疯!显然,这是Google Chrome扩展程序的一项功能,而不是错误。我做了更多搜索,发现了这个问题:Chrome Extension - first link is auto-focused in popup
从那里,解决方案基本上是使用tagindex =&#34; -1&#34;在a
元素上,以防止扩展程序在加载过程中自动关注它。
希望这有助于其他可能遇到同样问题的人。