在Chrome扩展中使用什么而不是window.location.href？ [英] What to use instead of window.location.href in chrome extension?

问题描述

您好我正在尝试创建一个chrome扩展，为了使我的应用程序扩展，我正在执行这些步骤，

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

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

3.我选择了然后选择我的应用程序。

4.我点击Pack扩展名。

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

清单文件

  {
name：...，
description：........，
 manifest_version：2，
minimum_chrome_version：23，
version：0.1.1，
offline_enabled：true，
图标： {
16：sample.png
}，
权限：[
storage，tabs，< all_urls>，webview 
，
app：{
background：{
scripts：[background.js] 
 } b 
 
 $ b code 
 $ b  background.js  
  chrome.app.runtime.onLaunched.addListener（function（）{
 chrome.app.window.create（ 'login.html'，{
 id：'main'，
 bounds：{width：1024，height：768} 
}）; 
}）; 
  
在包含标签的权限时，我收到以下警告： 
 
 
 尝试安装此扩展时出现警告：
'tabs'仅适用于扩展和旧版打包应用程序，但这是一个打包应用程序。 
  
我的应用程序不被视为扩展程序。而我正在尝试这个页面导航。 
我通常在jquery中使用 window.location.href =sample.html。为此，我在我的Chrome扩展中遇到错误，
 使用空白_target 
  
 
 
 
然后我试着用这行代码，
  function clickHandler（e）{
 chrome.tabs.update（{url：service1.html}）; 
 window.close（）; 
} 
 document.addEventListener（'DOMContentLoaded'，function（）{
 document.getElementById（'click-me'）。addEventListener（'click'，clickHandler）; 
} ）; 
  
这段代码也不起作用。可以帮助我将应用扩展为并帮助我进行页面导航。提前感谢。
  解析方案

建议查看扩展官方指南，下面是一个基于你的需求的基本示例，当浏览器启动时（你的扩展也被执行），它会打开 login.html ，有一个登录按钮，一旦点击它， sample.html 就会打开。

$ b manifest.json

  {
name：.. 。，
description：........，
manifest_version：2，
minimum_chrome_version：23，
版本：0.1.1，
图标：{
16：sample.png
}，
background：{
脚本：[background.js] 
} 
} 
  

background.js

  chrome.windows.create（{url：login.html} ）; 
  

login.html

 <！DOCTYPE html> 
< html lang =en> 
< head> 
< meta charset =UTF-8> 
< title>文档< / title> 
< / head> 
< body> 
< button id =click-me>点击我< /按钮> 
< script src =login.js>< / script> 
< / body> 
< / html> 
  

login.js

  document.addEventListener（DOMContentLoaded，function（）{
 document.getElementById（click-me）。addEventListener（click，function（）{
 window.location .href =sample.html; 
}，false）; 
}）; 
  

Hi I am trying to create a chrome extenstion,For making my app to extenstion I am following this steps,

1.Go to chrome option -> More tools -> Extension.

2.I selected the developer mode in that window.

3.I selected the unpacked extention then selected my app.

4.I clicked Pack extension.

In my application I have few html pages,CSS,JS and manifest file and background.js.

manifest file

{
    "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 }
  });
});

While Including permissions for tab I am getting th e following warning,

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.

My app is not considered as a extension.And I am trying this for page navigation. I usually use window.location.href="sample.html" in jquery. For this I am getting a error in my chrome extension,

Use blank _target

Then I tried using this line of codes,

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

This snippent of code is also not working.Can some one please help me to make my app a extension and help me in page navigation.Thanks in advance.

解决方案

It's recommended to take a look at Offical Guide for extensions, the following is a basic sample based on your requirements, when browser launches (your extension is also executed), it will open login.html, there is a login button, once clicking it, sample.html will open.

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"});

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>

login.js

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

这篇关于在Chrome扩展中使用什么而不是window.location.href？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！