Question

我有一个奇怪的问题。让我尽可能地描述它：

设置：

点击扩展程序图标后，我有一个Google Chrome扩展程序会打开一个popup.html窗口。我在MacOS（最近的公共版本）和Windows（Windows 7 - 最近版本）中使用此扩展程序

问题：

大部分扩展只是文字。但是，在页面的末尾，有一个超链接。在没有显示太多细节的情况下，我在此处附上了截图（为阻止文本和功能而道歉）。

每当我点击扩展图标时，popup.html窗口就会打开到页面上超链接的位置（在底部）。并且超链接是聚焦的（就好像你有鼠标悬停在它上面 - 链接加下划线并突出显示元素）。

您可以从屏幕截图中看到 ＆＃34;来自...＆＃34; 超链接的语句是重点突出的。我尝试了一个带有单个超链接的简单香草页面 - 页面向下滚动到链接，超链接自动聚焦。

我的css中没有任何自动对焦属性。

我采取了哪些措施进行问题排查

我的css非常简单（只是背景颜色和字体颜色）。
我测试了另一个简单的链接 - 有相同的结果。它好像试图在页面上找到第一个URL链接并跳转到该位置并突出显示它。
在另一台计算机（PC）上尝试过。更多详情如下。

更多详情：

我只在MacOS（最近的Chrome版本）上发现了这个问题。我还在Windows 7上使用Chrome 55.0.2883.87进行了测试 - ＆gt;此问题 不会发生 。 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元素上，以防止扩展程序在加载过程中自动关注它。

希望这有助于其他可能遇到同样问题的人。

Chrome Extension的popup.html自动向下滚动＆amp;打开时关注超链接

0 个答案: