Javascript chrome.webNavigation.onBeforeNavigate事件在window.location更改后不会立即执行_Javascript_Google Chrome_Google Chrome Extension_Webpack_Babeljs

Javascript chrome.webNavigation.onBeforeNavigate事件在window.location更改后不会立即执行

javascript google-chrome google-chrome-extension webpack

Javascript chrome.webNavigation.onBeforeNavigate事件在window.location更改后不会立即执行,javascript,google-chrome,google-chrome-extension,webpack,babeljs,Javascript,Google Chrome,Google Chrome Extension,Webpack,Babeljs,请注意，我正在使用Babel+Webpack生成ES2017代码到ES5（我正在使用async等待功能，并希望在旧浏览器中使用相同的代码，但更改较少）我的目标是在特定选项卡上执行#个代码。这些代码包括，表单提交，点击链接等。。将重定向到新网页。在加载页面之前，代码应该暂停的内容与它所导航/重定向的页面无关。因此，为了模拟重定向，我使用了window.location=”https://facebook.com“ 简而言之，每件事。预期的行为是我打开带有url:'的选项卡https://goo

请注意，我正在使用

Babel

Webpack

生成

ES2017

代码到

ES5

（我正在使用

async

等待

功能，并希望在旧浏览器中使用相同的代码，但更改较少）

我的目标是在特定选项卡上执行#个代码。这些代码包括，表单提交，点击链接等。。将重定向到新网页。在加载页面之前，代码应该暂停的内容与它所导航/重定向的页面无关。因此，为了模拟重定向，我使用了

window.location=”https://facebook.com“

简而言之，每件事。预期的行为是

我打开带有

url:'的选项卡https://google.com“

将窗口位置更改为

https://facebook.com

在facebook完全加载后显示警报消息

我有下面的助手课程

tabs.js process.js 最后，我的

background.js

用于收听

webNavigation.onbeforeavigate

和

webNavigation.onCompleted

并执行脚本

请注意，

onBeforeNavigate

和

onCompleted

提供了每个选项卡的详细信息，但当我运行此操作时，我只有一个选项卡。因此，我直接初始化

isTabStatus

，而不进行

tabId

验证

background.js 所以，预期的行为是

创建新选项卡

导航到

https://google.com

导航到

https://facebook.com

警报

hello world

但实际上是

创建新选项卡

导航到

https://google.com

警报

hello world

导航到

https://facebook.com

最后，控制台记录如下

before navigation status: loading https://www.google.com/
waiting
on completed status: completed https://www.google.lk/?gfe_rd=cr&ei=VIueWa2uFZOCuATNtJTIBA
waiting
execute: window.location = 'https://facebook.com'
before navigation status: loading https://facebook.com/
execute: alert('hello world')
on completed status: completed https://www.facebook.com/

await waitUntilLoaded();

console.log('****');
await Tabs.execute(tabId, {
    code: "alert('hello world')"
});

在这里，

alert

已在

onbeforeavigate

之后执行完毕，但实际上，

alert

消息显示在

google

页面中。在我单击ok（警报消息ok）之后，它会重定向到facebook

如果我在

警报

之前添加

console.log

就很清楚了，如下所示

before navigation status: loading https://www.google.com/
waiting
on completed status: completed https://www.google.lk/?gfe_rd=cr&ei=VIueWa2uFZOCuATNtJTIBA
waiting
execute: window.location = 'https://facebook.com'
before navigation status: loading https://facebook.com/
execute: alert('hello world')
on completed status: completed https://www.facebook.com/

await waitUntilLoaded();

console.log('****');
await Tabs.execute(tabId, {
    code: "alert('hello world')"
});

那么最后的日志是

before navigation status: loading https://www.google.com/
waiting
on completed status: completed https://www.google.lk/?gfe_rd=cr&ei=TY-eWb_0D6baugTMqqWACQ
waiting
execute: window.location = 'https://facebook.com'
****
before navigation status: loading https://facebook.com/
execute: alert('hello world')
on completed status: completed https://www.facebook.com/

正如您所看到的，在

窗口之后立即执行警报。位置更改。甚至在onBeforeNavigation
回调之前
请在下面查找其他详细信息
mainfest.json
package.json
webpack.config.js
运行指令
要运行，请将所有文件放在一个文件夹中，使用npm install
安装所有依赖项。并使用npm run webpack
将代码编译到dist文件夹。使用dist文件夹background.js
作为后台脚本
我试过了
没有babel
或webpack
的相同流程，即使没有任何承诺
。找到下面的background.js

background.js
结果我还是和以前一样<代码>控制台.日志如下

tab created
before navigation https://google.com/
on completed https://www.google.lk/?gfe_rd=cr&ei=CVCfWervItzLugSemrqAAw
window location changed, current tabs is completed: true
**** tab status has not been changed even if it's navigating to facebook.com ****
before navigation https://www.facebook.com/
alert executed
on completed https://www.facebook.com/

我试过了
一旦我们执行了window.location
，我想当前页面卸载和新页面加载之间有一点时间间隔。所以我听了内容脚本中的window.onbeforeuload
事件，并在事件发生后将消息传递给运行时
content.js
我听了来自后台脚本的消息
background.js
但是，即使在webNavigation.onBeforeNavigate
回调之后，仍然收到了此消息。
请在没有使用babel处理代码的情况下尝试您的扩展。您不必最终以这种方式发布它，但是这样做会分离出由于您使用babel而产生的任何问题。它还将使其他人更可能查看您的代码。关于Google Chrome extensions的问题中有很大一部分是因为有人试图使用一个用于网页的包/库/工具，而该包/库/工具在Chrome extensions中无法正常工作。请通过使用babel进行w/o测试来消除这种可能性。如果您坚持使用babel进行测试/开发，请将生成的代码而不是您正在使用的代码发布到babel。或者，至少为babel提供您使用的所有配置设置、安装的内容等，并准确描述您如何更改文件。问题的关键是我们可以重复你的问题。我们需要能够测试您实际使用的代码。巴别塔的使用使得我们在这个问题上遇到了问题。既然如此，它仍然是一个黑匣子（使用巴别塔的方式太多了）。一般来说，删除你的内容发布新版本是违反政策的。虽然您确实在您的问题上做了实质性的改进，但处理这种情况的正确方法是尝试重新打开问题。您的更新版本位于“重新打开”队列中，允许用户查看是否要重新打开。暂停后的第一次编辑会自动将其放入该队列。但是，这样做确实需要时间。你可能会做的一件事是ping那些对你的问题发表评论的人，让他们知道你所做的更新。我知道你确实留下了评论，但是没有人会被通知这个评论。请注意，我被告知您之前的评论，该评论使用@Makyen向我发出ping，但不是说您已经更新了问题。更多关于在评论中通知用户的信息：懒得读那1000行废话。
{
  "manifest_version": 2,

  "name": "Tax Executer",
  "description": "",
  "version": "1.0",

  "browser_action": {
    "default_icon": "images/icon.png",
    "default_popup": "views/popup.html"
  },
  "permissions": [
    "webNavigation",
    "webRequest",
    "activeTab",
    "tabs",
    "http://*/",
    "https://*/",
    "file:///*/"
  ],
  "background": {
    "page": "views/background.html"
  },

  "content_scripts": [{
      "run_at": "document_start",
      "matches": ["https://*/*", "file://*/*"],
      "js": ["dist/content.js"]
    }],

  "automation": {}
}

{
  "name": "babel_webpack_starter_project",
  "version": "1.0.0",
  "description": "helps you to get started with babel + webpack project quickly",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack",
    "babel": "babel"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/SrineshNisala/babel_webpack_starter_project.git"
  },
  "keywords": [
    "babel",
    "webpack",
    "starter"
  ],
  "author": "SrineshNisala",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/SrineshNisala/babel_webpack_starter_project/issues"
  },
  "homepage": "https://github.com/SrineshNisala/babel_webpack_starter_project#readme",
  "devDependencies": {
    "assert": "^1.4.1",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-unassert": "^2.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "webpack": "^3.4.1"
  },
  "dependencies": {
    "enumify": "^1.0.4",
    "socket.io-client": "^2.0.3"
  }
}

const path = require('path');

module.exports = {
    entry: {
        background: "./src/background.js",
        content: "./src/content.js",
        popup: "./src/popup.js"
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },

    module: {
        loaders: [{
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
                presets: ["es2015", "es2016", "es2017", "stage-1"],
                plugins: [
                    "transform-runtime",
                    // "babel-plugin-unassert"
                ]
            }
        }]
    }
};

var isCompleted = false;

chrome.webNavigation.onBeforeNavigate.addListener((info) => {
    if(info.frameId === 0) {
        console.log('before navigation ' + info.url);
        isCompleted = false;
    }
});

chrome.webNavigation.onCompleted.addListener((info) => {
    if(info.frameId === 0) {
        console.log('on completed ' + info.url);
        isCompleted = true;
    }
});

// Create tab
chrome.tabs.create({
    url: "https://google.com"
}, (tab) => {

    console.log("tab created");

    // Navigate to facebook.com
    chrome.tabs.executeScript({
        code: "window.location = 'https://www.facebook.com'",
        runAt: "document_idle"
    }, () => {

        console.log("window location changed, current tabs is completed: " + isCompleted);

        // Wait until facebook is loaded
        if(!isCompleted) {
            console.log('waiting until facebook is loaded');

            setTimeout(() => {

                // Alert hello world
                chrome.tabs.executeScript({
                    code: "alert('hello world')",
                    runAt: "document_idle"
                }, () => {
                    console.log("alert executed");
                });
            }, 5000);

        } else {
            console.log("**** tab status has not been changed even if it's navigating to facebook.com ****");
            chrome.tabs.executeScript({
                code: "alert('hello world')",
                runAt: "document_idle"
            }, () => {
                console.log("alert executed");
            });
        }
    });
});

tab created
before navigation https://google.com/
on completed https://www.google.lk/?gfe_rd=cr&ei=CVCfWervItzLugSemrqAAw
window location changed, current tabs is completed: true
**** tab status has not been changed even if it's navigating to facebook.com ****
before navigation https://www.facebook.com/
alert executed
on completed https://www.facebook.com/

window.addEventListener('beforeunload', (event) => {
    chrome.runtime.sendMessage({type: "onbeforeunload"});
});

var isCompleted = false;


chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if(request.type === "onbeforeunload") {
            console.log("page is unloading");
            isCompleted = false;
        }
    }
);