Determine which JavaScript script to include based on whether the code is being executed within a Chrome extension

I am in the process of developing a Chrome extension as well as a web JavaScript application. I currently have an HTML container.

I need the container.html file to include

<script src="extension.js">

when it is running in the Chrome extension, and

<script src="web.js">

when it is running in the web version.

(However, having both at the same time is not possible)

Does anyone have any ideas on how to dynamically include either one script or the other depending on whether the code is running as an extension or not?

javascriptgoogle-chrome-extension

Answer №1

In order to create a script that is specific to the chrome extension environment, consider having a unique property or global object that is only accessible within this context - such as chrome.cookies. By checking for the presence of this object or property, you can dynamically load the appropriate JavaScript file like so:

function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    script.onload = function(){
        callback();
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

if(chrome && chrome.cookies){
    loadScript('extension.js', function(){ //loaded })
}
else{
    loadScript('web.js', function(){ //loaded })
}

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

Display picture on webpage in 10 seconds

Hi, I'm working on a website project and I've run into an issue where I need to use JavaScript, but I haven't mastered it yet. I have a background image slideshow set up where a new image appears every 6 seconds. My idea is to have the sec ...

javascripthtml

Determining the data type of a textbox value in JavaScript: String or Number?

I am encountering an issue with the code below: <input type="text" value="123" id="txtbox"> <script> var myVar = document.getElementById('txtbox').value; if (myVar.substring) { alert('string'); } else{ alert('number&a ...

javascript

Tips for determining if a key is present in local storage:

I need to set a key value, but only if it doesn't already exist. In my component1.ts file, I am assigning the key and value in the constructor. However, I want to include a condition that this action should only be taken if the key is not already pre ...

javascriptangulartypescriptlocal-storage

"Bringing in a Nunjucks Macro - How to Easily Use It

I've been working on a script that renders a nunjucks contact.html template with the following code: let fs = require('fs'); let nj = require('nunjucks'); var contact = fs.readFileSync('./src/contact.html',&a ...

javascripthtmlnode.jsnunjucks

What is the reason for the Circle to Polygon node module producing an oval or ellipse shape instead of a circle shape?

I've been experimenting with the npm package circle-to-polygon and I crafted the following code to generate a polygon that resembles a circle. const circleToPolygon = require('circle-to-polygon'); let coordinates = [28.612484207825005, 77. ...

javascriptnode.jsgoogle-mapsnpmgeojson

Bringing JQuery into your Electron project through HTML

Working on some ElectronJS HTML coding and in need of using JQuery within the HTML. I've gone ahead and installed jQuery with npm install jquery. The question is, which file do I import to make use of JQuery? <!DOCTYPE html> <html lang="en" ...

javascriptjquerynode.jsnpmelectron

Utilize AJAX to showcase JSON data retrieved from a specified URL

We are striving to showcase the names listed in our JSON file within a div using JavaScript. Despite multiple attempts, we have not yet achieved success. JSON data: This is the approach we took: <button>fetch data</button> <div id="result ...

javascriptjqueryhtmlajaxjson

Why isn't it possible to send POST data to a JSON file using JQuery/AJAX?

I'm currently learning how to use JQuery/Ajax from a helpful tutorial on YouTube. To watch the video, simply click here. While I can successfully retrieve data from the order.json file, I encounter an error whenever trying to send POST requests. Bel ...

javascriptjqueryhtmljsonajax

Refreshing JWT Authentication in Angular

I am currently following a tutorial on Egghead.io, which can be found here. However, I am adding a MongoDB to fetch my users which is causing me some issues. I have managed to get everything working except for the part where it mentions that the /me route ...

javascriptangularjsnode.jsmongodbexpress

`In the event that a series of criteria is unfulfilled in a JavaScript forEach() loop`

My IntersectionObserver utilizes a forEach method to invoke certain functions when a condition is met for each item in an array: const sections = document.querySelectorAll("section") function removeHighlight(id) { someElementArray[id].cl ...

javascriptarraysforeach

How can Ext JS 6.2 automatically expand the East panel when the West panel is triggered?

In my Ext JS v6.2 Grid application, I am faced with the task of ensuring that if the WestRegion panel is closed, the EastRegion panel should open automatically, and vice-versa. Being new to Ext JS, I initially attempted to achieve this using jQuery. Howeve ...

javascriptjqueryextjs

jqGrid display/hide columns options dialogue box

I am looking to implement a feature that allows users to toggle columns in my jqGrid. I came across a module for this purpose, but unfortunately, it is no longer supported in jqGrid 4.x. I have searched for a replacement module without success. Are there ...

javascriptjqueryjqgrid

Are there any modules in Angular 8 that are used across various projects?

I am facing a challenge with managing two projects that share the same core functionality. These projects have identical layouts and pages, but certain components and modules are specific to each project. Currently, I maintain two separate Angular projects ...

javascriptangularmoduleangular7

Set the timezone of a Javascript Date to be zero

Is there a way to create a Javascript date without any specific timezone? When I try to do so in Javascript, it automatically sets it to GMT Pacific standard time. let newDate = new Date(new Date().getFullYear(), 0, 2, 0, 0, 0, 0) }, newDate: Sat Feb 01 2 ...

javascripttypescript

Having Trouble Redirecting to Another Page from My Ionic Framework Controller?

Struggling to figure out why my app isn't switching to another page when clicking in my controller. Any help or pointers on what I might be missing or doing wrong would be greatly appreciated! Here's the code snippet from my app.js file: $s ...

javascriptangularjsionic-framework

What is the process for importing a file with an .mts extension in a CJS-first project?

Here's a snippet from a fetchin.mts file: import type { RequestInfo, RequestInit, Response } from "node-fetch"; const importDynamic = new Function("modulePath", "return import(modulePath);") export async function fetch(u ...

javascriptnode.jstypescriptes6-modulescommonjs

Is there a way to duplicate and insert a function in node.js if I only have its name?

I'm currently working on a code generation project and I've encountered a problem that I initially thought would be easy to solve. However, it seems to be more complicated than I anticipated. My task involves taking a method name as input, naviga ...

javascriptnode.js

What is the best way to eliminate an object from an array using JavaScript?

I am currently working with two arrays named totalArray and selectionArray. These arrays have dynamic values, but for the sake of example I have provided sample arrays below. My goal is to remove objects from totalArray based on their id rather than inde ...

javascriptarrays

Significant delay in processing second jQuery Ajax call

Attempting a simple Ajax call with page content refresh using the following code snippet: $("a.ajaxify-watched").bind("click", function(event) { $item = $(this); $.ajax({ url: $(this).attr("href"), global: false, type: "G ...

javascriptajaxjquery

I'm struggling with developing react applications due to problems with canvas elements

I am currently using an M1 MacBook Pro, with Node version 15.4.1 and npm version 7.0.15. When I ran the command npx create-react-app my-app, it gave me this output: I have attempted various solutions but keep encountering the same issue related to "canva ...

javascriptreactjsnpmcanvasnpx