I am in the process of creating a Chrome Extension with a frontend powered by Vue.js. Everything was going smoothly using vuecli until my app started utilizing the Webextension-API. This API is only accessible to registered Extensions, not normal websites.
What would be the ideal configuration for developing a Vue.js Extension that leverages the capabilities of vuecli (which supports webpack tooling)? How can I set up a testing environment for the application?
If you're looking to streamline your browser extension development process, I highly recommend utilizing the vue-cli-plugin-browser-extension. Despite being initially designed for Vue CLI 3.x, it also seamlessly integrates with Vue CLI 4.x (verified on version 4.3.1).
This plugin offers a range of time-saving features such as live-reload functionality and effortless bundling for various browsers like Chrome and Firefox.
To incorporate this into your Vue CLI project, simply execute: vue add browser-extension.
After doing some deep thinking, I stumbled upon the vue-cli-service-binary. This nifty binary allows for project monitoring and app rebuilding when necessary. By default, vuecli will generate files in the dist directory where I also placed my manifest.json, contentScript.js, and backgroundScript.js files. Executing the following command will trigger the app to rebuild when needed, enabling a form of hot-reloading (opening and closing the popup). Build times are impressively quick for a small app (~200ms).
vue-cli-service build --watch --no-clean
Additionally, you may need to turn off eslint on save (refer to this) as it might throw errors related to not finding chrome. Afterwards, load the unpacked extension into a fresh Chrome session and proceed with testing using developer tools. Unfortunately, I'm still struggling to make Vue Devtools work with the extension.
This method works well for me: I can effectively develop Chrome extensions powered by vuejs. However, I am curious if anyone has alternative workflows or suggestions for improvement?
UPDATE: @tony19's solution seems to be the recommended approach.
Seeking guidance as I embark on a new project! Check out this link to see my skills in action: collegewebsite.zip Now for the query at hand. I am working on a project named Coffee Cafe for my tuition assignment. It involves utilizing CSS and HTML with J ...
Apologies for the vague title of this question, as I am not well-versed in programming and even less so in node.js My goal is simple: I aim to utilize the bitfinex-api-node package (a node.js wrapper for the bitfinex cryptocurrency exchange) that I instal ...
I am looking to add a special magical property to my Print this Page button. This property will automatically enable the default unset option (shown in the picture) which is to print the backgrounds of div colors and background images. <a href="#" oncl ...
Hello everyone, I am a beginner with Vue and I am interested in learning how to modify the DOM without relying on methods such as document.querySelector or getElementById. Let's take for instance this input: <input id="myInputId" class=& ...
Using Prettier to format the <script> section in my Vue project has hit a snag. Prettier also formats the <template>, which I'm fine with, but there's an issue. The problem arises when there is a list in the template. Prettier forma ...
I'm exploring the possibilities of the gridsome-plugin-firestore plugin (). My goal is to utilize this plugin to connect to a simple firestore database collection named news. The news collection contains multiple documents with different fields: con ...
Currently, I am in the process of learning jquery. I have created a basic html file with some jquery validations, however, they are not functioning as expected. The main problem is: If I input my name first and then check the checkbox, everything works co ...
Is there a way to sort an array of objects based on specific rules? Unlike objects, arrays have fixed item order, so how can I rearrange them according to certain criteria? [{name: 'james', name: 'alice', name: 'sam'}] If I w ...
How can I display the email in the email text input field with this code? It doesn't seem to work correctly when there is a failed login attempt. value= "if(isset($_POST['submit'])){ ?PHP echo $_POST[''email']?>"; ...
Hey there! I'm currently working on a webshop demo project for my portfolio. I've encountered an issue while trying to fetch data from commerce.js. The data is in the form of objects, which are causing problems when I try to map them. I've a ...
When it comes to fetching values from MongoDB and displaying them with AngularJS, the process can be straightforward with Jade but becomes more complex with Angular. Here is how the data flows: An array of items is retrieved from MongoDB, each containin ...
Having trouble deciphering the response of an http request that is a binary datastream representing a jpeg image, despite numerous attempts. Edit: Including the full code snippet below: xmlhttp = false; /*@cc_on@*/ /*@if (@_jscript_versio ...
Using Tabulator to create a table, where clicking on a cell pushes the cell values to an array with initial value of '0'. The goal is to add a reset button that sets the values back to '0' when clicked. component.ts names = [{name: f ...
Within my server-side JavaScript code, I am utilizing Joi for validating a JavaScript object. The schema being used is structured as follows: var schema = Joi.object().keys({ displayName: Joi.string().required(), email: Joi.string().email(), e ...
Looking for advice on the most effective method to create a timer clock using Createjs. I've attempted to reference HTML elements with DOMElement in the past, but encountered difficulties. Essentially, I need to display a timer within a container so p ...
--> I want to be able to input data into a textarea using just one textarea element. --> The reason for this is so that when the data in MySQL is updated, I can type new data in the textarea while still keeping the existing data. I have tried using ng-re ...
Recently, I have been working on updating the task owner ID using a lookup field selection in my code. The tasks are displayed based on the selected date from a datepicker value under the query in the controller. However, I encountered an issue where the a ...
Adding Negative Values to Tailwind CSS Utility Plugin Quick Summary: I've developed a custom Tailwind utility plugin that includes numeric values. I'm looking for a way to introduce negative numbers by adding a - at the start of the class, simi ...
As someone who is relatively new to Javascript and web development, I am currently working on a project that involves creating multiple text areas for users to input and save text. Each text area is accompanied by a button with a unique ID that functions a ...
My code within the componentDidMount() function initializes a widget popup when the page loads. It then sets the name and email using parameters received from the previous page. const fullName = this.state.data[0]; console.log(fullName); const e ...