Is there a way to link to a html file in another directory when creating a window from background.js?

Question

I'm in the early stages of creating a Chrome app, which I plan to deploy to the Chrome web store. I have a valid manifest, index.html, index.css, properties.css, and background.js files in the app folder. Within the background.js file, I have an "event handler" that waits for the app to be launched. Then it creates a window with a body of index.html. The problem is that the background.js file is in a different folder than the index.html folder. Here is the hierarchy of my app folder:

My app Name

   images

      My app icon.png

   index

      index.html

      index.css

   scripts

      background.js

   styles

      properties.css

   manifest.json

Whenever I try to link to the index.html file, it fails. When the app is launched, it just creates a blank window. I am keeping them in separate folders for organization, and if there isn't a way to do so, I will just put them together.

I have checked the console for errors. There are none.
I have tried the html method: ../index/index.html. It doesn't work (aww man).

NOTE: I plan on adding a title div which will act as a title bar because when I create the window, I will disable the default one.

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

I should see a bar that is 10% of the view-port height, but I just see an empty window.

Why don't you simply use an absolute path from the extension root, which is where manifest.json resides? For example "/index/index.html" — wOxxOm

Alireza Alireza · Accepted Answer · 2019-06-12T22:54:26

I guess you can just replace this:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create("../index/index.html", {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
});

with:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create("index/index.html", {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
});

Basically you don't need those ../ before index/index.html

Is there a way to link to a html file in another directory when creating a window from background.js?

1 Answers