Unlocking the capabilities of Chrome extensions using Angular 2 and TypeScript

Currently attempting to develop a chrome extension using angular2 and typescript, I have hit a roadblock in trying to access the chrome API (in this case, chrome.bookmarks).

I have successfully gained access to the chrome object by following guidance from this article on accessing chrome.runtime.sendMessage from typescript

Despite being able to reach the chrome object, I am unable to access chrome.bookmarks

manifest.json

{
    "manifest_version": 2,
    "name": "x",
    "short_name": "x",
    "description": "x",
    "version": "0.1.0",
    "author": "x",
    "permissions": [
        "bookmarks",
        "https://ajax.googleapis.com/"
    ]
}

It appears that I should be utilizing @types to access chrome as recommended in this post on using chrome extension apis in typescript

However, I am unsure of what exactly to import. Should I use something like

import { Chrome, filesystem, filewriter } from '@types';
? I am feeling puzzled and struggling to find documentation on this issue (leading me to doubt the suitability of using angular2 for a chrome extension)

Answer №1

When your app runs in the browser, the chrome service becomes available at runtime. However, you cannot import it directly. To prevent compilation errors, I found that declaring a variable was effective:

declare var chrome;

In each section of code where chrome is used, it's important to first check if it exists to avoid crashes during development:

funcThatUsesChrome(args) {
   if(chrome){
      chrome.doSomeAction();
   }
}

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

What is the easiest way to connect to MongoDB and add a new post with just a few lines of code?

Currently, I'm working with express.js and node.js. Can you share a brief snippet of code for connecting to mongo and inserting a post into the database? ...

JQuery cannot target content that is dynamically inserted through an Ajax request

When I use an ajax call to pass dynamically generated html, such as in the example below: var loadContent = function(){ $.ajax({ url: '/url', method: 'GET' }).success(function (html) { $('.con ...

Deciding whether an array forms a chain of factors

I am curious about the reasons why this code is failing some of the tests provided. It deliberately avoids using any ES6 code. Here is the given prompt: *A factor chain can be defined as an array where each preceding element serves as a factor for the su ...

ACTUAL preventing a component from losing its focus

I have been exploring ways to effectively stop a DOM element from losing focus. While researching, I came across different solutions on StackOverflow such as: StackOverflow solution 1 StackOverflow solution 2 StackOverflow solution 3 However, these sol ...

updating rows in a table

Currently, I have a grid array filled with default data retrieved from the database. This data is then displayed on the front end in a table/grid format allowing users to add and delete rows. When a row is added, I only want to insert an empty object. The ...

Changing divider color in Material-UI with React

I need some assistance with changing the color of the divider component from the material ui framework. I have successfully changed colors for other components using the useStyles() method like this: const useStyles = makeStyles(theme => ({ textPad ...

Tips for keeping an Angular Material Dialog component at the forefront of your application's layout

My application is designed with a vertical Navigation Bar positioned on the left side of the screen, and a Home Component displayed in the <router-outlet> to its right. However, I am facing an issue where when I open a Dialog Component within the H ...

Sending information from Vue to Express for processing

Is there a way to pass data from Vue to an express server? For example, in the scenario below, I am looking to send the data logged in my Vue function to the "id" variable on the server side. expressApp.post('/delete' , function (request, respons ...

Scripting in jQuery to create dropdown menus

I've encountered a unique issue on my website where a user's selection from one list should update the values in another list: <form id="form1"> <div> <select id="workField"> <option value ...

Working with Angular's forEach method and handling null values

I'm encountering an issue where the array of selected devices is not getting the values when attempting to add multiple devices to a group. Can someone identify the problem or suggest an alternative method? I referred to http://www.dotnetawesome.com/2 ...

Tips for effectively utilizing the useDraggable and useSortable hooks within the dnd-kit library

I'm currently working on developing a basic calculator using React and dnd-kit. The idea is to have draggable elements in the calculator that can be sorted within a droppable area with smooth animation effects. However, I've encountered an issue ...

React and the turn.js library (please note that turn is not a predefined function)

I'm trying to integrate turn.js with React by following an example I found here: https://codesandbox.io/s/005xlk45mn After adapting the code to my project, I encountered the following error: TypeError: jquery__WEBPACK_IMPORTED_MODULE_6___default(... ...

Having trouble reaching the unidentified function

There are two different scenarios where the 3rd party library (BrowserPrint.js) is used; FUNCTIONAL ENV - JS and jQuery with the 3rd party libraries included simply in the <head> section of the document and the main function being called in $(do ...

Discrepancies in ESLint outcomes during React app development

As a newcomer to React development, I am encountering discrepancies between the errors and warnings identified in my project's development environment versus its production environment. Strangely, I have not configured any differences between these en ...

Session management functions properly in Postman, however, encountering issues when attempting to use it on a web

Working on a NodeJS project using express-session to handle sessions. When sending a post request to http://localhost:5500/login, a session is created with an additional property userid. Upon making a get request to http://localhost:5500/ using Postman, th ...

How to disable typescript eslint notifications in the terminal for .js and .jsx files within a create-react-app project using VS Code

I'm currently in the process of transitioning from JavaScript to TypeScript within my create-react-app project. I am facing an issue where new ESLint TypeScript warnings are being flagged for my old .js and .jsx files, which is something I want to avo ...

Creating a customized SelectField component for Material-UI v1.0.0-alpha.21 with a fix for the Menu anchorEl problem

Currently, Material-UI v1.0.0 does not have a selectField implemented yet so I am attempting to create my own version using TextField, Menu, and MenuItem Components. Below is the code for my custom selectField: export default class SelectField extends Rea ...

Guide on automatically extracting table rows and generating an Excel spreadsheet

I am currently working on a script that dynamically adds the first row (TH) to a table and then exports it to an Excel sheet. However, I am facing an issue where instead of appending each row, the script keeps stacking on top of the next table row. Below ...

Sending data with the request body using Express and Passport

I've created a login application using Express and Passport, but I'm having trouble directing the user to their specific user profile page. The goal is for users to fill out an HTML form and then be redirected to their own profile page (which dif ...

Merge these two NPM packages together

Two npm projects exist: web-api (a library) and UI. The web-api utilizes gRPC-web to interact with the backend before converting it into a simple JavaScript object. In the UI, Vue.js is used in conjunction with web-api. Objective: merge these two project ...