从 background.js 创建 window 时,有没有办法将 link 到另一个目录中的 html 文件?
Is there a way to link to a html file in another directory when creating a window from background.js?
我正处于创建 Chrome 应用程序的早期阶段,我计划将其部署到 Chrome 网上商店。我在应用程序文件夹中有一个有效的清单、index.html、index.css、properties.css 和 background.js 文件。在 background.js 文件中,我有一个 "event handler" 等待应用程序启动。然后它创建一个 window,body 为 index.html。问题是 background.js 文件与 index.html 文件夹位于不同的文件夹中。这是我的应用程序文件夹的层次结构:
My app Name
images
My app icon.png
index
index.html
index.css
scripts
background.js
styles
properties.css
manifest.json
每当我尝试 link 到 index.html 文件时,它都会失败。当应用程序启动时,它只会创建一个空白 window。我把它们放在单独的文件夹中以便组织,如果没有办法,我就把它们放在一起。
- 我已经检查了控制台是否有错误。有none.
- 我试过 html 方法:../index/index.html。它不起作用(aww man)。
注意: 我计划添加一个标题 div 作为标题栏,因为当我创建 window 时,我将禁用默认一个。
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create("../index/index.html", {
id: 'main',
bounds: { width: 620, height: 500 }
});
});
manifest.json
{
"manifest_version": 2,
"name": "UI Button Designer",
"version": "1",
"icons": {
"128": "images/icon_128.png"
},
"permissions": [],
"app": {
"background": {
"scripts": ["scripts/background.js"]
}
},
"minimum_chrome_version": "28"
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../styles/properties.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="container">
<div id="header"></div>
</div>
</body>
</html>
index.css
#container {
width: 100%;
min-width: 100%;
max-width: 100%;
height: 100%;
min-height: 100%;
max-height: 100%;
margin: 0;
padding: 0;
border: none;
}
#header {
width: 100%;
height: 10%;
background-color: #fbbc05;
}
我应该看到一个是 view-port 高度 10% 的条形,但我只看到一个空的 window。
我想你可以替换这个:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create("../index/index.html", {
id: 'main',
bounds: { width: 620, height: 500 }
});
});
与:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create("index/index.html", {
id: 'main',
bounds: { width: 620, height: 500 }
});
});
基本上 index/index.html
之前不需要那些 ../
我正处于创建 Chrome 应用程序的早期阶段,我计划将其部署到 Chrome 网上商店。我在应用程序文件夹中有一个有效的清单、index.html、index.css、properties.css 和 background.js 文件。在 background.js 文件中,我有一个 "event handler" 等待应用程序启动。然后它创建一个 window,body 为 index.html。问题是 background.js 文件与 index.html 文件夹位于不同的文件夹中。这是我的应用程序文件夹的层次结构:
My app Name
images
My app icon.png
index
index.html
index.css
scripts
background.js
styles
properties.css
manifest.json
每当我尝试 link 到 index.html 文件时,它都会失败。当应用程序启动时,它只会创建一个空白 window。我把它们放在单独的文件夹中以便组织,如果没有办法,我就把它们放在一起。
- 我已经检查了控制台是否有错误。有none.
- 我试过 html 方法:../index/index.html。它不起作用(aww man)。
注意: 我计划添加一个标题 div 作为标题栏,因为当我创建 window 时,我将禁用默认一个。
background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create("../index/index.html", {
id: 'main',
bounds: { width: 620, height: 500 }
});
});
manifest.json
{
"manifest_version": 2,
"name": "UI Button Designer",
"version": "1",
"icons": {
"128": "images/icon_128.png"
},
"permissions": [],
"app": {
"background": {
"scripts": ["scripts/background.js"]
}
},
"minimum_chrome_version": "28"
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../styles/properties.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="container">
<div id="header"></div>
</div>
</body>
</html>
index.css
#container {
width: 100%;
min-width: 100%;
max-width: 100%;
height: 100%;
min-height: 100%;
max-height: 100%;
margin: 0;
padding: 0;
border: none;
}
#header {
width: 100%;
height: 10%;
background-color: #fbbc05;
}
我应该看到一个是 view-port 高度 10% 的条形,但我只看到一个空的 window。
我想你可以替换这个:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create("../index/index.html", {
id: 'main',
bounds: { width: 620, height: 500 }
});
});
与:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create("index/index.html", {
id: 'main',
bounds: { width: 620, height: 500 }
});
});
基本上 index/index.html
../