在 Chrome 扩展中使用什么来代替 window.location.href？答案

【问题标题】：What to use instead of window.location.href in chrome extension?在 Chrome 扩展中使用什么来代替 window.location.href？
【发布时间】：2016-08-30 19:31:53
【问题描述】：

您好，我正在尝试创建一个 chrome 扩展，为了使我的应用程序扩展，我正在按照以下步骤操作，

1.转到chrome选项->更多工具->扩展。

2.我在那个窗口中选择了开发者模式。

3.我选择了解压后的扩展，然后选择了我的应用程序。

4.我点击了Pack扩展。

在我的应用程序中，我的 html 页面、CSS、JS 和清单文件以及 background.js 很少。

清单文件

{
    "name": "...",
    "description": "........",
    "manifest_version": 2,
    "minimum_chrome_version": "23",
    "version": "0.1.1",
    "offline_enabled": true,
    "icons": {
        "16": "sample.png"  
    },
    "permissions": [
    "storage","tabs","<all_urls>","webview"
    ],
    "app": {
        "background": {
            "scripts": ["background.js"]
        }
    }
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('login.html', {
    id: 'main',
    bounds: { width: 1024, height: 768 }
  });
});

虽然包含选项卡的权限，但我收到以下警告，

There were warnings when trying to install this extension:
'tabs' is only allowed for extensions and legacy packaged apps, but this is a packaged app.

我的应用程序不被视为扩展程序。我正在尝试将其用于页面导航。我通常在 jquery 中使用window.location.href="sample.html"。为此，我的 chrome 扩展程序出现错误，

Use blank _target

然后我尝试使用这行代码，

function clickHandler(e){
  chrome.tabs.update({url:"service1.html"});
  window.close();
}
document.addEventListener('DOMContentLoaded',function(){
  document.getElementById('click-me').addEventListener('click',clickHandler);
});

这段代码也不起作用。请有人帮我把我的应用程序变成一个扩展程序并帮助我进行页面导航。提前致谢。

【问题讨论】：

试试location.replace()函数
我仍然收到此错误。无法打开指向“chrome-extension://hnbkidfmkmjfoafmcmficmejfcfdjghc/service1.html”的同窗口链接；尝试目标 =“_blank”。 @克劳迪奥斯
首先从清单中删除 app，以便 chrome 不会将其视为应用程序（应用程序包装器，离开背景...）。然后你的 tabs 权限将起作用
我无法为此选项卡设置绑定。但现在这充当了扩展。你能帮我么？ @WolfWar
@Anu bounds 仅适用于 chromium 打包的应用程序窗口。对于从扩展打开的选项卡或窗口，您不使用 bounds。使用 chrome.tabs APi 打开选项卡或使用 chrome.windows API 打开窗口。您也不需要 webview 权限

标签： jquery google-chrome google-chrome-extension google-chrome-app

【解决方案1】：

推荐看Offical Guide for extensions，下面是根据你的需求做一个基本样例，当浏览器启动时（你的扩展也执行了），会打开login.html，有一个登录按钮，一次点击它，sample.html 将打开。

manifest.json

{
    "name": "...",
    "description": "........",
    "manifest_version": 2,
    "minimum_chrome_version": "23",
    "version": "0.1.1",
    "icons": {
        "16": "sample.png"  
    },
    "background": {
        "scripts": ["background.js"]
    }
}

background.js

chrome.windows.create({url: "login.html"});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="click-me">Click me</button>
    <script src="login.js"></script>
</body>
</html>

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("click-me").addEventListener("click", function() {
        window.location.href = "sample.html";    
    }, false);
});

【讨论】：