browser-extension | The Hypothesis browser extensions | Browser Plugin library

I'm trying to figure out what is the way to use hierarchical dependencies in node.

I'm building a VueJs chrome extension using Vue CLI and vue-cli-plugin-browser-extension (https://www.npmjs.com/package/vue-cli-plugin-browser-extension). In the background file I need to use two dependencies:

1. jquery
2. table-to-json (https://www.npmjs.com/package/table-to-json)

table-to-json needs jquery in order to work

I installed the two dependency using node install and require the dependencies in the background fild. But when I try to run the background script I get this error:

background.js:37 Uncaught ReferenceError: jQuery is not defined at Object.f370 (background.js:37) at n (background.js:1) at Object.fe77 (background.js:37) at n (background.js:1) at Object.1 (background.js:1) at n (background.js:1) at background.js:1 at background.js:1 f370 @ background.js:37 n @ background.js:1 fe77 @ background.js:37 n @ background.js:1 1 @ background.js:1 n @ background.js:1 (anonymous) @ background.js:1 (anonymous) @ background.js:1 DevTools failed to load SourceMap: Could not load content for chrome-extension://ljejdkiepkafbpnbacemjjcleckglnjl/js/background.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

table-to-json is not able to see jquery. What am I missing?

This is my background file, package.json and vue.config.js:

backgroung.js

I am working on a open source project, and there's this error that even when there are no images to show, the extension(The app is basically is a web browser extension which let's you search images) still shows the "Load More" button, so I thought I could remove this bug by adding the class ```removeButton`` to the button which applies the following setting

I'm trying to implement a JSON viewer chrome extension. I already have the Viewer implemented with Vue (http://treedoc.org). Now the problem is how can I can inject the Vue page with Chrome extension content script.

I found this post is very helpful to inject normal javascript file in the extension. But this is with a known javascript file name.

I found this post and this vue-cli-plugin-browser-extension is helpful to use Vue for extension options page and override page, etc, as the entry point for them are HTML files. but the content script entry point is a javascript, to inject a javascript file in the content script, you need to know the exact file name. With the plugin and Webpack, the generated javascript files are appended with hash such as "override.0e5e7d0a.js" which is not known upfront.

I have created an Edge extension that currently makes an Ajax call to a web API i have also developed in order to request data. Currently after hours of testing, I know the Ajax call works correctly and returns the relevant data.

My issue is the Ajax call will fail when I attempt to call it from my Edge extension. It doesn't provide any reasoning or errors, just simply the error message I added to the Ajax call (error: .... see below). Having tested the exact same extension and Ajax call to my web API in chrome the Ajax call from within the extension works correctly and returns the data from which I can then use.

I'm using the Vue CLI UI.
I've created a project and added the vue-cli-plugin-browser-extension

So far so good.

Now I'm trying to add Vuetify into the mix.
I tried with the official plugin, but nothing shows up in the extension's popup.
I tried the CDN approach but when I try to add Vuetify to the Vue instance I get an error saying Vuetify is not defined.

Any Ideas?

Also important: I would really much prefer not to use the CDN approach if it is at all possible. Is there a way to use npm install to also install the css and fonts needed to run Vuetify?

I had to update a form on a certain webpage to change something i wanted. I failed to do so, but instead of sending a simple text reply saying 'This cannot work' for example, they sent a whole JSON response on the display. I'm just curious, does this response pose any security vulnerabilities for either me or the server i contacted to process my request?

P.S. The '***'s in the response are so because I'm not sure if providing that info is the right thing to do. However, even without it, the response is fairly intuitive.

This is the response:

{"name":"StatusCodeError","statusCode":409,"message":"409 - [object Object]","error":{"status":"failure","message":"Email already taken.","code":91,"data":null,"error":{"message":"None"}},"options":{"uri":"*********","method":"POST","headers":{"Authorization":"Bearer *********=","Cookie":"*********=;cm_sub=denied","User-Agent":"********","Accept-Language":"en-US","Original-Accept-Language":"********","X-********-InstallId":"*****","X-*****-AppState":"active","X-*****-Parent-Rid":"********","X-*****-Root-Rid":"********","X-*****-Rid":"*****","X-Pixel-Ratio":1,"X-*****-App-Type":5,"X-Prefer-User-Locale":"1","X-Real-Ip":"********","X-*****-Real-Ip":"*****","X-*****-Csrf":"********","X-*****-Browser-Extension-Installed":"false","X-********-Referrer":"********","X-Bot":"false","X-Referrer":"********","X-Url":"********"},"form":{"base_scheme":"https","client_id":1431601,"timestamp":*****,"country":"US","email":"*****","oauth_signature":"********"},"traceId":false,"parseJson":true,"resolveWithFullResponse":true,"json":true,"simple":true},"response":{"statusCode":409,"body":{"status":"failure","message":"********","code"********,"data":null,"error":{"message":"None"}},"headers":{"server":"nginx","date":"Sun, 10 Mar 2019 16:08:31 GMT","content-type":"application/json","content-length":"112","connection":"close","*****-version":"*****","x-content-type-options":"*****","x-frame-options":"DENY","*****-generated-by":"********"},"request":{"uri":{"protocol":"http:","slashes":true,"auth":null,"host":"*****","port":"*****","hostname":"localhost","hash":null,"search":null,"query":null,"pathname********","path":"/v3/users/settings/","href":"********"},"method":"POST","headers":{"Authorization":"********","Cookie*********","User-Agent":"Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/******** Safari/537.36","Accept-Language":"en-US","Original-Accept-Language":"en-US,en;q=0.9","X-*****-InstallId":"********","X-*****-AppState":"active","X-*****-Parent-Rid":"********","X-*****-Root-Rid":"*************","X-*****-Rid":"*****","X-Pixel-Ratio":1,"X-*****-App-Type":5,"X-Prefer-User-Locale":"1","X-Real-Ip":"*****","X-*****-Real-Ip":"********","X-********-Csrf":"********","X-*****-Browser-Extension-Installed":"false","X-********-Referrer":"*************","X-Bot":"false","X-Referrer":"********","X-Url":"********","content-type":"application/x-www-form-urlencoded","accept":"application/json","content-length":179}}}}

Development Environment OS: Windows 7 Enterprise LTS
Browser compatibility minimum requirements: Should support all Edge, Firefox, Chrome browsers, as of 2018.
Current ongoing issue: Unable to run VM on dev workstation; Cannot run Windows 10 VMs to debug Microsoft Edge extensions.

To explain:

• An "all-in-one browser extension" refers to a browser extension code that uses the same code with minor differences to work on various WebExtensions / Chrome Extensions supported browsers. At bare minimum, the same codebase should work and run on Edge, Firefox, and Chrome with very minor changes.
• Callbacks on the content scripts for Edge/Firefox/Chrome extensions are handled differently.
• For unknown reasons, I cannot run VM on my workstation machine. When VM is running, VM client is black. This is a localized issue on my end that I cannot resolve, so I'm forced to find a different solution/alternative.

How are they handled differently on the content scripts:

• Edge: browser.runtime.sendMessage uses callbacks, and returns undefined.
• Firefox: browser.runtime.sendMessage uses Promises, and returns a Promise.
• Chrome: chrome.runtime.sendMessage uses callbacks, and returns undefined.

According to various references:

Firefox / Chrome / MS Edge extensions using chrome.* or browser.*

https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi/

On the content scripts, you can declare the following JavaScript snippet at the top in order to create a global variable that can be referenced everywhere else:

I am trying to automatically install a Microsoft Edge Extension in an enterprise managed environment: Google Chrome allow this behavior (check this post for further information), but it seems impossible to do the same for Edge (the Edge extension policy states that "The installation must be initiated and completed by the user, using only the user experience provided by Microsoft Edge and the Microsoft Store").

I was evaluating the development of a cross browser extension (supported browsers IE, Chrome, Safari and Firefox): I was looking for a cross-browser development framework, in order to avoid the code duplication and to fasten the building process.
I had a look at this question, and I visited the suggested websites: every company seems to have stopped working on the product.
I read this article too, whose conclusion seems to dissuade developer from the building of a cross browser extension.
So, I have a few questions:
- Does anyone of you recommend a cross browser extension development framework, which is suitable for the purpose I described above?
- Is there a reason why the above frameworks are not maintained anymore?
- Does anyone discovered a more efficient way to pursue the same aim without developing a browser extension?

Thanks so much,
Daniele