Is there a way to open an HTML file within the current Chrome app window?

Welcome,

My goal is to create a Chrome App that serves as a replacement for the Chrome Dev Editor. Here is my current progress:

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('backstage.html', {
    'outerBounds': {
      'width': 1036,
      'height': 583
    }
  }); 
});

backstage.html

<!DOCTYPE html>
<html>
  <head>
    <title>Celestia Pro</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel = "stylesheet" href = "material.css">
    <link rel = "stylesheet" href = "material.min.css">
    <link rel = "stylesheet" href = "styles.css">
  </head>

  <body>
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
                mdl-layout--fixed-header">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <div class="mdl-layout-spacer"></div>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
                    mdl-textfield--floating-label mdl-textfield--align-right">
              <label class="mdl-button mdl-js-button mdl-button--icon"
                      for="fixed-header-drawer-exp">
                <i class="material-icons">search</i>
              </label>
              <div class="mdl-textfield__expandable-holder">
                <input class="mdl-textfield__input" type="text" name="sample"
                       id="fixed-header-drawer-exp">
              </div>
            </div>
        </div>
      </header>
      
      <main class="mdl-layout__content">
        <div class="page-content">
          <style>
            .demo-card-wide.mdl-card {
              width: 100%;
            }
            .demo-card-wide > .mdl-card__title {
              color: #fff;
              height: 176px;
              background: url('welcome-card.jpg') center / cover;
            }
            .demo-card-wide > .mdl-card__menu {
              color: #fff;
            }

            div.start-cards {
              padding-top: 25px;
              padding-left: 50px;
              padding-right: 50px;
            }
          </style>

          <div class="start-cards" align = center>
            <div class="demo-card-wide mdl-card mdl-shadow--2dp">
              <div class="mdl-card__title">
                <h2 class="mdl-card__title-text">Welcome to Celestia Pro</h2>
              </div>
              <div class="mdl-card__supporting-text">
                Celestia Pro is a new integrated development environment (IDE) that allows developers to create Chrome apps quickly and efficiently. We're still in our early stages, but we hope this tool proves useful.
              </div>
              <div class="mdl-card__actions mdl-card--border">
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" onclick="runWizard()">
                  Get Started
                </a>
                <script>
                </script>
              </div>
            </div>
          </div>
          
        </div>
      </main>
    </div>

  <script src = "./material.min.js">
  <script src = "./material.js">

  </body>
</html>

However, I encountered an issue when trying to make the Get Started button open another page named 'backstage2.html'. Despite several attempts, including:

None of these approaches worked successfully. How can I achieve the desired functionality of opening 'backstage2.html' within the same Chrome app window? Any guidance on this matter would be greatly appreciated.

javascriptcssjsonhtmlgoogle-chrome-app

Answer №1

To incorporate web components into your project, consider importing the file directly into your main file for seamless integration. Another approach is to route the request to the background page, where you can maintain a reference to the active window. This reference includes the contentWindow property, representing a JavaScript window object. Utilize this reference to update the content of the main window by fetching and reading new file data.

Answer №2

Integrate the webview feature into your backstage.html file, either within the page or in a new window.

You could have something like this:

backstage.html:

<a id="wizard" class="···">Get Started</a>
<!-- onclick doesn't work due to CSP restrictions (refer to note below) ··· -->
<webview></webview>
<!-- ··· -->
<script src="./main.js"></script>

main.js:

onload = function {
  // ···
  document.querySelector('#wizard').addEventListener('click', runWizard);
  // ···
};
// ···
function runWizard() {
  // ···
  document.querySelector('webview').src = 'backstage2.html';
  // ···
};

CSP -Content Security Policy-, note: "You can’t use inline scripting..."

@abarisone: Thanks!

Answer №3

Click to open your HTML file in the same window.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Trying to set a value to an undefined object in the bind() method

I am currently working on implementing a listener for my video player in order to update the input range on some custom controls. However, I have encountered an issue with an error message that states Uncaught ReferenceError: Invalid left-hand side in as ...

javascriptjquery

Utilize CSS and Bootstrap to ensure equal-sized responsive images in a row by scaling them down to the same dimensions

I am new to web design and struggling with resizing images using the img-fluid class in a particular portfolio view where they function as thumbnails. I will upload some images to clarify my goal. The challenge is maintaining consistency in size for each i ...

htmlcssbootstrap-5

What is the best method for incorporating card components from Stripe into a Vue.js application?

I am currently facing an issue with implementing Stripe in my Vue.js project. Despite following the documentation provided, I am encountering errors such as "stripe is not defined" and "Uncaught ReferenceError: h is not defined". Initially, I created a pa ...

javascriptvue.jsstripe-payments

ng-view is the culprit behind the website's fatal error

Encountering a "RangeError: Maximum call stack size exceeded" in the console while trying to recreate a basic routing example from w3schools. The crash seems to be linked to <div ng-view></div> in index.html. Despite making minimal changes from ...

javascripthtmlangularjsangular-routing

Using Google-Prettify with AngularJS

I have been attempting to implement Google Prettify in my AngularJS project. It seems to be functioning correctly on the main page, but once I navigate to another route using Angular (after ng-view), it stops working properly. You can check out the plunker ...

javascriptcssangularjsngroute

Using Electron to redirect to a different HTML file while passing GET variables

I am currently working on developing an Electron app. Within the project files, for example, I have app.html. My goal is to send GET variables like ?id=54&q=asd to the receiver.html, where I can then retrieve these id and q variables. As we all know, ...

javascriptelectron

Difficulty transferring information between two components by using services

I am trying to pass the values of an array from the Search component to the History component in order to display the search history. My current code structure looks like this: search-page.component.ts export class SearchPageComponent implements OnInit ...

javascriptangularservicecomponents

Responsive Alignment of Slanted Edges using CSS

I have been working on creating a responsive diagonal layout with slanted shapes (refer to the image attached). However, I'm facing a challenge with aligning the edges smoothly at different screen sizes, especially when the rows grow and the screen re ...

javascripthtmlcssresponsivediagonal

Looking for a seamless way to convert jsp code to html using sightly in AEM 6.1?

I need help transforming JSP code to HTML using Sightly in AEM. In the JSP code, we have a scriptlet that stores a value from the dialog into a JSP variable called "coltype" using the code pageContext.setAttribute("coltype", xssAPI.filterHTML(properties. ...

javascripthtmljspaemsightly

Upon loading the page, include a class to a specific element within an AngularJS ng-repeat function by evaluating the content of a JSON object

I have a group of buttons that are generated from a json object. Whenever a user clicks on a button, it changes color (referred to as the selected color) using the ng-class directive with bootstrap classes. If the same button is clicked again, it reverts b ...

javascriptangularjs

"The incredible power of the spread operator in conjunction with EsLint

Is there a way to duplicate an object and modify one of its properties? Here's an example: const initialState = { showTagPanel: false, }; export default function reducerFoo(state = initialState, action) { switch(action.type) { case types.SH ...

javascriptreactjseslint

When an array object is modified in Vue, it will automatically trigger the get method to validate any

One of the challenges I am facing is related to a button component that has a specific structure: <template> <button class="o-chip border-radius" :class="{ 'background-color-blue': theValue.isSelected, ...

javascriptvue.jsreactive-programming

What is the best way to transfer GitHub OAuth information to a client?

I am in the process of implementing Github authorization and then sending received JSON data to the client. After doing some research, I came across a helpful tutorial at The tutorial suggests following this path: "/" -> "/login" -> "/redirect" -&g ...

javascriptnode.jsapiexpressgithub-api

What is the process for uploading a JSON object containing an image to a server?

Here is the code I am using to send data to the server in JSON format: NSData *jsonData = [dict dataUsingEncoding:NSASCIIStringEncoding allowLossyConversion:YES]; NSString *jsonLength = [NSString stringWithFormat:@"%d",[jsonData length]]; //I ...

iosobjective-cjson

Charting with multiple series

I am exploring a unique approach to creating a timeline chart. I am seeking advice on the best way to implement this in the world of JavaScript. My challenge is to create interactive milestones with descriptive text displayed on the Y axis, while displayi ...

javascriptexcel

Exploring anchor elements within a div using Selenium in Python to extract URLs

Hey there, I'm currently attempting to iterate through anchor elements within a div and retrieve the links of these elements. <div class="List"> <a class="selected" href="link">text 1</a> <a ...

pythonhtmlseleniumselenium-webdriver

Submitting forms with Ajax in IE(8)

Sample Google form Related spreadsheet I modified the original code to create two custom forms: First created form Second created form Both forms are functional on most browsers except for IE(8). Any idea why? First form: <!DOCTYPE html> <h ...

javascriptjqueryhtmlajaxforms

Updating Vue.js Component Data

I have set up a basic Example Component which is bound to a Vue Instance as shown below: <template> <div class="container-fluid"> <div class="row"> <div class="col-md-8 col-md-offset-2"> < ...

javascriptvue.jsvuejs2

How can I adjust the position of a circular progress bar using media queries?

My code involves creating a circular progress bar. However, I am facing an issue where the circles stack on top of each other when I resize the window, as shown in the output screenshot. I want to ensure that the position of the 3 circles remains fixed whe ...

htmlcssbootstrap-4

Prevent accordion expansion triggered by the More button click

When the More button is clicked, it should NOT expand and collapse. https://i.sstatic.net/toV1b.gif If the accordion initial state is open, it must stay open even if button is clicked, if initial state is collapsed then after the more button the accordio ...

javascripthtmljquerycssbootstrap-5