chrome 更新到版本 57.0.2987.133（64 位）后，Chrome 扩展程序无法正常工作答案

【问题标题】：Chrome extension not working after chrome update to Version 57.0.2987.133 (64-bit)chrome 更新到版本 57.0.2987.133（64 位）后，Chrome 扩展程序无法正常工作
【发布时间】：2023-03-25 18:28:01
【问题描述】：

最近将 chrome 浏览器更新到版本 57.0.2987.133（64 位）之后我的扩展停止工作。以下是对扩展工作的解释：

Popup.js

document.addEventListener('DOMContentLoaded', function() {
    chrome.tabs.getSelected(null, function(tab) {
      d = document;
      var f = d.createElement('form');
      f.action = 'https://example.com/login';
      f.method = 'post';
      var i = d.createElement('input');
      i.type = 'hidden';
      i.name = 'url';
      i.value = tab.url;
      console.log(tab.url);
      f.appendChild(i);
      d.body.appendChild(f);
      f.submit();
    });
});

popup.html

<!doctype html>
<html>
  <head>
    
    <script type="text/javascript" src="jquery-2.1.1.js"></script>
    <script src="popup.js"></script>
    <style type="text/css">
    .image {
        display: block;
        margin-left: auto;
        margin-right: auto 
    }
    </style>
  </head>
  <body style="width: 350px;height:340px;">
    
    <h3>Connecting to server please wait ...</h3>
    <br/>
    <br/>
    <br/>
    <img src="/loader.gif" alt="Please Wait" class="image" align="middle">
  </body>
</html>

manifest.json

{
"update_url": "https://clients2.google.com/service/update2/crx",

  "manifest_version": 2,
  "name": "test name",
  "description": "test description",
  "version": "0.1.2",

  "browser_action": {
   "default_icon": "128.png",
   "default_popup": "popup.html"
  },
  "icons": { 
      "16": "128.png",
      "32": "128.png",
      "64": "128.png",
      "128": "128.png" 
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  
  "web_accessible_resources": [ "128.png" ],

  "permissions": [
    "tabs"
   ]
}

在 chrome 更新之前，扩展工作正常。
- 我正在使用 post 方法提交表单。
- 我正在发送一个密钥“url”，如果请求来自扩展程序，我将在服务器站点上检查它，从而加载扩展程序的登录表单。
- 一旦扩展程序登录加载到弹出窗口中，用户登录并被重定向到弹出窗口中的适当页面。
这是扩展的流程。但更新后，加载继续弹出。浏览器正在取消表单提交请求。在谷歌上搜索该问题时，我发现使用 ajax post 方法提交表单而不是直接提交表单。此方法能够从中获取登录表单，但没有网页的任何 css 和 js，因为 url 在页面中是相对的，并且 chrome 扩展 ID 被添加为带有所有链接的基本 url。因此，我将这些网址更改为绝对网址，但提交功能不再起作用，因为它又是一个表单。我再次将表单提交更改为服务器端的 ajax 后提交请求。但是在网页上编写的 javascript 在 chrome 扩展中不起作用。所以问题是如何使之前工作的扩展工作？

【问题讨论】：

您的实际问题是什么？你有一堆陈述，但毫无疑问。 Pop.js 应该是 popup.js 吗？请不要发布部分最小化的代码。请使用多于一个字符且描述变量所代表内容的变量名称。这样做可以让其他人更容易理解您的代码。当向那些志愿服务的人提问时，不要让他们更难帮助你。这样做会导致愿意帮助您的人减少。
Chrome 57 启用了扩展的站点隔离，这意味着您不能直接提交表单（无论如何这在扩展中都是一个糟糕的解决方案）。而是通过 XHR 为 submit 和 POST 添加事件监听器，例子很多。

标签： google-chrome-extension

【解决方案1】：

chrome.tabs.getSelected() 自 Chrome 33 起已弃用。尝试像这样使用chrome.tabs.query({ active: true })：

document.addEventListener('DOMContentLoaded', function() {
    chrome.tabs.query({ active: true }, function(tabs) {
      var tab = tabs[ 0 ];
      d = document;
      var f = d.createElement('form');
      f.action = 'https://example.com/login';
      f.method = 'post';
      var i = d.createElement('input');
      i.type = 'hidden';
      i.name = 'url';
      i.value = tab.url;
      console.log(tab.url);
      f.appendChild(i);
      d.body.appendChild(f);
      f.submit();
    });
});

【讨论】：

使用了 chrome.tabs.query({ active: true }) 但仍然面临同样的问题

【解决方案2】：

我遇到了一个问题，DOMContentLoaded 事件似乎在 DOM 完全呈现之前触发。自从我的 Chrome 更新到 57.0.2987.133 后，这一直是个问题。

也许您可以改用窗口加载事件。

window.addEventListener('load', function() {

【讨论】：