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.
Here is the initial JSON data I have: { "fullName": "abc", "age": 19, ... } I am looking to utilize Node.js in order to add elements from the above JSON to an object called Variables within the following JSON: { &q ...
I'm having trouble getting this block of code to function properly: $("a.expand_all").on("click",function(){ $(this).text('Hide'); $('.answer').each(function () { $(this).slideDown(150, function () { $( ...
I am inputting a set of tasks into my v-form tasks: [ { title: 'title1', description: 'task 1 description', isComplete: functionA() }, { title: 'title2', ...
// =============================================================================== // Auth // =============================================================================== const admin = require('firebase-admin'); //what happens if i move th ...
I need to create an HTML table that compares segments in a JSON object. The format should display the segments along with their measures organized by domain group and vertical: ------------------------------------------------------------------------------ ...
I'm currently in the process of developing a chrome extension using the node module "chrome-extension-async" and have encountered an issue with utilizing await within the background listener. In my setup, the content.js file sends a message to the ba ...
I have created a component that includes a state called chosenGenre, along with a function that updates this state based on button clicks. My goal is to access the updated state (which is of type string) in another component. This is the initial componen ...
Seeking assistance with setting up redirects. Below are snippets of the code. index.js const router = createBrowserRouter([ { //Defining App as the root element... path: "/", loader: () => { }, element: <App/>, ...
Currently, I am utilizing Material-UI and making use of the onNewRequest property in the AutoComplete field. However, the onNewRequest only triggers when Enter is pressed or when a value is selected. I am interested in calling the onNewRequest even when ...
I am currently utilizing the selenium webdriver along with a customized automation framework built in nodejs. My goal is to implement drag and drop functionality for a slider using the actions class, but unfortunately I am encountering issues. Below you ca ...
I am facing an issue with my radio buttons being displayed as images. When a picture (radio button) is selected, I want the other pictures to become hidden. To achieve this, I plan to add a class to the checked picture and then add another class to the unc ...
Upon page load, the first alert is displaying correctly. However, the alert inside the ajax call is not triggering. It appears that the ajax call itself is not functioning as intended - it is supposed to invoke a method in the controller, but no longer s ...
I am currently working on a web application with Rails 5.0.2 and I have a set of JS files for the project: https://i.stack.imgur.com/WYB23.png Each of my own JS files follows a similar pattern, like this: $(function () { var init = function () { ...
I'm currently working on a Vue application running with Docker, and I want to use environment variables to target specific project repos. However, when I try setting the env variables, they don't seem to be recognized in the Dockerfile. Can you ...
Fetching data from firestore and applying filters const [projects, setProjects] = useState([]); const fetchData = (sortBy = "NAME_ASC") => { const unsubscribe = firebase .firestore() .collection("projects") ...
I am currently working with the following jQuery code: myFunc: function(cmd, obj){ var idToExtMap = this.map; var requireRes = this.reqInst; var deferreds = []; var ret = true; $.each(idToExtMap[cmd], function( ...
Looking for help with JavaScript and jQuery! I have a script that creates an HTML table from a CSV file, using Bootstrap for styling. I want to add CSS or a border to a table cell after it has been edited, but my jQuery attempts haven't worked. Any su ...
When a user clicks on an Anchor element, I am displaying a Bootstrap popover using the following JQuery code. Jquery $("[data-toggle=popover]").popover({ trigger: 'click', placement: "top", html: true, ...
Recently delving into the realm of JavaScript programming, I find myself faced with a new challenge. While not my first language, this is one of my initial ventures with it. My current project involves creating a chess program utilizing the HTML5 canvas fe ...
I've encountered an issue with the validation process in my code. Everything seems to be working fine except for the .isEmail method, which keeps flagging even valid email addresses as invalid. No matter how I adjust the validation rules, the problem ...