I am adding nativeMessaging permission to my Browser Extension with the following code:
// function triggered by user gesture
const promptPermissionsUpgrade = () =>
new Promise((res) =>
chrome.permissions.request({ permissions: ['nativeMessaging'] }, res)
Then listening for the upgrade:
chrome.permissions.onAdded.addListener(({permissions}) => {
if (permissions && permissions.includes("nativeMessaging")) {
connectNative();
}
});
When I call connectNative(), I run chrome.runtime.connectNative('app_name').
This throws TypeError: chrome.runtime.connectNative is not a function.
I double checked the key in my manifest.json and it is correct ("optional_permissions": ["nativeMessaging"]).
The example in the MDN docs does not say anything about this.
What am I missing?
The app would work as expected on reload, so I realized I could just have the extension reload and voila! It worked as expected.
!chrome.runtime.connectNative && chrome.runtime.reload();
chrome.runtime.connectNative('app_name')
-- runtime.reload docs
Related
Introduction
Because there is no build in Auth library for nuxt 3 yet, I am trying to create my own composable called useAuth.
The Problem
I am getting a startPerformanceMeasurement error when i try to call the loginRedirect or loginPopup method.
Uncaught (in promise) TypeError: this.startPerformanceMeasurement is not a function
at PerformanceClient2.startMeasurement (PerformanceClient.ts:100:45)
at BrowserPerformanceClient2.startMeasurement (BrowserPerformanceClient.ts:46:55)
at RedirectClient2.<anonymous> (StandardInteractionClient.ts:204:64)
at step (_tslib.js:87:23)
at Object.next (_tslib.js:68:53)
at _tslib.js:61:71
at new Promise (<anonymous>)
at __awaiter (_tslib.js:57:12)
at StandardInteractionClient2.getDiscoveredAuthority (StandardInteractionClient.ts:202:115)
at RedirectClient2.<anonymous> (StandardInteractionClient.ts:142:48)
Code
composables/useAuth.js
import * as msal from '#azure/msal-browser'
let state = {
authService: null,
}
export const useAuth = () => {
// use public configuration from nuxt
var config = useAppConfig();
//create authentication instance
state.authService = new msal.PublicClientApplication(config.msalConfig);
//return signIn method
return {
signIn
}
}
const signIn = async () => {
const tokenRequest = {
scopes: [
'openid',
'offline_access',
'Users.Read'
],
}
const response = await state.authService
.loginRedirect(tokenRequest)
.then(() => {
})
.catch(err => {
console.log(err) //TypeError: this.startPerformanceMeasurement is not a function
});
}
Index.vue
<script setup>
if(process.client) {
const auth = useAuth()
auth.signIn()
}
</script>
Apparently this is a bug in the MSAL library.
As mentioned in this issue on Github, they're currently working on a fix.
As a temporary solution, you could downgrade to a previous version. Downgrading might be as simple as just removing the caret character (^) when referring to the version in your package.json.
Edit: They've released a fix as part of msal-common v9.1.1.
I tested by downgrading multiple releases and the first one working was #azure/msal-browser#2.31.0
Faced this issue too. It is caused due to a bug from Microsoft. The versions that work fine are:
"#azure/msal-browser": "2.32.0",
"#azure/msal-common": "9.0.1",
"#azure/msal-react": "1.5.0",
Please ensure to remove the ^ in the number to keep it pinned.
Watch https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/5569 for updates from MS.
I have an Electron app using the recommended setup from https://www.debugandrelease.com/the-ultimate-electron-guide/ where access is given via window.api.receive and window.api.send to the preloader. However I need to use window.api.receive within my react component and my issue is don't know how to remove the "receive" when the component is unmounted.
From the react side of things I think i just need to add in the code in the use effect, but I don't know what code can be used to remove the window.api.receive that was added.
// On Mount
useEffect(() => {
console.log('mount APP')
window.api.receive("helpLine", (text, loading) => {
// Things are done here
})
}, []);
// on Unmount
useEffect( () => () => {
console.log("unmount App")
// window.api.receive should be removed here
}, [] );
Use ipcRenderer.removeListener(channel, listener) to remove the specified listener.
https://www.electronjs.org/docs/latest/api/ipc-renderer#ipcrendererremovelistenerchannel-listener
When I execute this code in the console of a website, it goes well, and reaches the console.log('defined').
However, when I execute it via a chrome extension content script, I keep getting "undefined" in my customElements prints. Why?
const script = document.createElement('script')
script.setAttribute('type', 'module');
script.setAttribute('src', 'https://unpkg.com/pose-viewer#0.2.3/dist/pose-viewer/pose-viewer.esm.js');
document.body.appendChild(script);
while (!window.customElements.get('pose-viewer')) {
await new Promise(resolve => requestAnimationFrame(resolve))
console.log(window.customElements.get('pose-viewer'))
}
console.log('defined')
I can see the script being injected to the page and loaded well via the network tab.
Additionally, if I run this through the chrome extension, and then try window.customElements.get('pose-viewer') in the console, it works.
Load it via custom loader and inject to verify customelements
In Content Script
const script = document.createElement('script');
script.setAttribute('src', chrome.extension.getURL("js/customloader.js"));
document.body.appendChild(script);
And the js/customloader.js
const script = document.createElement('script')
script.setAttribute('type', 'module');
script.setAttribute('src', 'https://unpkg.com/pose-viewer#0.2.3/dist/pose-viewer/pose-viewer.esm.js');
script.onload = function() {
verifyCustomElements().then(fn => {
console.log('defined')
console.log(window.customElements)
})
}
document.body.appendChild(script);
async function verifyCustomElements(){
while (!window.customElements.get('pose-viewer')) {
await new Promise(resolve => requestAnimationFrame(resolve))
consol.log("checking")
console.log(window.customElements.get('pose-viewer'))
}
}
The defined now is ready to do customElements Stuff Now :)
Check if adding tabs to the list of permissions solves it.
Trying to setup typescript jest with puppeteer
i following step by step instructions as mentioned below
Jest-puppeteer with typescript configuration
there is a simple test
describe('Google', () => {
beforeAll(async () => {
await page.goto('https://google.com')
})
it('should display "google" text on page', async () => {
await expect(page).toMatch('google')
})
})
when i run my test i get weird error
ReferenceError: page is not defined
and it is pointing to the 'await page' object inside beforeAll
i also notice chrome try to kick in and but does not launch may be this error is b/c chrome could not launch.
jest-puppeteer library is responsible for launching a browser and providing browser and page objects
and here is the code taken from the page mentioned above in link
//jest-puppeteer.config.js
let jest_puppeteer_conf = {
launch: {
timeout: 30000,
dumpio: true // Whether to pipe the browser process stdout and stderr
}
}
const isDebugMode = typeof v8debug === 'object' || /--debug|--inspect/.test(process.execArgv.join(' '));
if (isDebugMode) {
jest_puppeteer_conf.launch.headless = false; // for debug: to see what the browser is displaying
jest_puppeteer_conf.launch.slowMo = 250; // slow down by 250ms for each step
jest_puppeteer_conf.launch.devtools = true; // This lets you debug code in the application code browser
jest_puppeteer_conf.launch.args = [ '--start-maximized' ]; // maximise the screen
}
module.exports = jest_puppeteer_conf;
there is a small debug section at the bottom which reminds to add following types i already have them and still no luck, any help is appreciated.
"compilerOptions": {
.....
"types": [
.......
"puppeteer",
"jest-environment-puppeteer",
"expect-puppeteer"
]
}
commenting out the following line fix the issue.
// testEnvironment: "node"
I'm trying to follow along with this tutorial on the NX website. The 2nd part has us setting up e2e testing with Cypress. I followed everything as said and even went as far as commenting out my code and pasting theirs into my files. I'm not getting any errors in the console. The error I see in Node says
Cypress verification timed out
This command failed with the following output:
C:.....\Cache\3.3.1\Cypress\Cypress.exe --smoke-test --ping=852
The tutorial also says there's a UI that should pop up on our app, which I don't see anything of the sort.
After generating the workspace and the application it has us modify the app.po.ts file by adding a couple constants, so far mine looks like this
export const getGreeting = () => cy.get('h1');
export const getTodos = () => cy.get('li.todo');
export const getAddTodoButton = () => cy.get('button#add-todo');
next it tells us to update the app.spec.ts file of the e2e test by adding this
import { getAddTodoButton, getTodos } from '../support/app.po';
describe('TodoApps', () => {
beforeEach(() => cy.visit('/'));
it('should display todos', () => {
getTodos().should(t => expect(t.length).equal(2));
getAddTodoButton().click();
getTodos().should(t => expect(t.length).equal(3));
});
});
The version of this file generated by Nx comes with this already in it
import { getGreeting } from '../support/app.po';
describe('todos', () => {
beforeEach(() => cy.visit('/'));
it('should display welcome message', () => {
getGreeting().contains('Welcome to todos!');
});
});
I originally tried adding the extra test underneath it and added the new imports. After getting the error message I thought maybe I needed to combine the tests into one test which looks like this.
describe('TodoApps', () => {
beforeEach(() => cy.visit('/'));
it('should display welcome message', () => {
getGreeting().contains('Welcome to todos!');
});
it('should display todos', () => {
getTodos().should(t => expect(t.length).equal(2));
getAddTodoButton().click();
getTodos().should(t => expect(t.length).equal(3));
});
});
I'm still getting the same error in Node and have no clue as to what I'm doing wrong. Prior to starting the project I updated node, npm and angular cli. I downloaded Angular Console for VS Code but am running into problems with it so I've just been using the Node Terminal and Brackets. Can anyone help?
if you in windows then you can solve this verification timeout issue by navigating to:
'C:\Users\<user>\AppData\Local\Cypress\Cache\3.4.0\Cypress'
then just double click on Cypress.exe.
After this close it and go back to your ide or terminal and redo what threw the error