So here is the problem, I am new to chrome extensions, And now trying to create a new one. but unfortunately my extension is not running here is the error I get,
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'onCompleted')
And this is the code in the service worker
chrome.runtime.onInstalled.addListener(async () => {
const filter = {
url: [
{
urlMatches: 'https://www.google.com/',
},
],
};
chrome.webNavigation.onCompleted.addListener(() => {
console.info("The user has loaded my favorite website!");
}, filter);
});
What am I doing wrong?
Related
In my html I reference the directive: v-init:url="myurlhere"
data() {
return {
currentPage: 1,
url: '',
news: '',
}
},
directives: {
init: {
mounted(el, binding) {
console.log(binding.value);
this.iterateUrlContents(binding.value)
},
}
},
methods: {
iterateUrlContents(url) {
console.log('url: ' + url);
console.log(binding.value) shows the expected result, however when I call iterateUrlContents I get the following:
Unhandled error during execution of directive hook
Uncaught TypeError: Cannot read property 'iterateUrlContents' of
undefined
And I also find that if I try this.url = binding.value I get
Uncaught TypeError: Cannot set property 'url' of undefined
Why is binding.value undefined, and how can I pass this information to my method?
If you want to access the component instance you need to do it via binding.instance in Vue3.
I am trying to write data which is 490 in length to a device using Web Bluetooth API. When I try to write I get NotSupportedError: GATT Error Unknown.
I am using chrome browser on android.
My app is in Angular 7 and I am using #types/web-bluetooth.
Below is the code:
navigator.bluetooth
.requestDevice({
filters: [{ name: this.deviceName }],
optionalServices: [this.GATT_SERVICE],
})
.then((device) => {
return device.gatt.connect();
})
.then((server) => {
return server.getPrimaryService(this.GATT_SERVICE);
})
.then((service) => {
this.gattService = service;
return this.gattService.getCharacteristic(this.GATT_CHAR);
})
.then((characteristic) => {
characteristic.writeValueWithResponse(this.arraybufferdata);
})
.catch(async (err) => {
console.log(err);
});
Can someone please help?
Is the issue related to the length? Can you reproduce error with less bytes in this.arraybufferdata?
Nit: You may want to return promise so that error gets propagated.
.then((characteristic) => {
return characteristic.writeValueWithResponse(this.arraybufferdata);
})
Wrong when using websocket, "Uncaught TypeError: Cannot read property 'subscribe' of undefined"
My code is :
init() {
let socket = new SockJS('http://127.0.0.1:8080/gs-guide-websocket');
this.stompClient = Stomp.over(socket);
this.stompClient.connect({}, function (frame) {
this.stompClient.subscribe('/topic/greetings', function (msg) {
console.log(msg.body)
});
});
},
According to the documentation, https://developer.bigcommerce.com/stencil-docs/development-quickstart/rendering-html-with-ajax, I can create a custom template based on a component file, such as products/product-view
What is the base page that contains the front-matter for rendering these components?
The component I am trying to render is not called from any html page using {{ > component/products/quicker-page }}. This seems to mean that it will not be included in the ./manifest.json, and is the root cause of the error displayed in stencil-cli when calling the getPage API.
window.stencilUtils.api.getPage('/product-1/', {
"template": "products/quicker-view"
},
(err, content) => {
console.log(content);
});
Error
TypeError: Uncaught error: Cannot read property 'components/products/quicker-view' of undefined
at TemplateAssembler.assemble (C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\#bigcommerce\stencil-cli\server\plugins\renderer\renderer.module.js:466:26)
at getTemplatePaths (C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\#bigcommerce\stencil-cli\lib\template-assembler.js:28:20)
at Async.each.err (C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\#bigcommerce\stencil-cli\lib\template-assembler.js:93:20)
at C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\#bigcommerce\stencil-cli\node_modules\async\dist\async.js:473:16
at iteratorCallback (C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\#bigcommerce\stencil-cli\node_modules\async\dist\async.js:1064:13)
at C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\#bigcommerce\stencil-cli\node_modules\async\dist\async.js:969:16
at ReadFileContext.Fs.readFile (C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\#bigcommerce\stencil-cli\lib\template-assembler.js:114:24)
at ReadFileContext.callback (C:\Users\bigcommerce\AppData\Roaming\nvm\v8.12.0\node_modules\#bigcommerce\stencil-cli\node_modules\graceful-fs\graceful-fs.js:90:16)
at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:420:13)
I was editing a different theme than what stencil was running against.
Added some logging to stencil-cli where the exception was coming from (must restart stencil between edits of these files)
C:\Users\username\AppData\Roaming\nvm\v8.12.0\node_modules\#bigcommerce\stencil-cli\server\plugins\renderer\renderer.module.js
internals.themeAssembler = {
getTemplates: (path, processor, callback) => {
// begin add
console.log(internals.getThemeTemplatesPath(), path);
// end add
TemplateAssembler.assemble(internals.getThemeTemplatesPath(), path, (err, templates) => {
// begin add
if (!templates) {
console.log('templates is empty')
}
// end add
if (templates[path]) {
// Check if the string includes frontmatter configuration and remove it
var match = templates[path].match(/---\r?\n[\S\s]*\r?\n---\r?\n([\S\s]*)$/);
if (_.isObject(match) && match[1]) {
templates[path] = match[1];
}
}
callback(null, processor(templates));
});
},
getTranslations: (callback) => {
LangAssembler.assemble((err, translations) => {
callback(null, _.mapValues(translations, locales => JSON.parse(locales)));
});
},
};
I have a tiny vue app where I'm wanting to use vue-resource to request an api endpoint.
I've installed vue-resource via npm
I've added the Vue.use(VueResource) lines to my bootstrap file
I've setup my component like this to call the .get method
Blog.vue
...
mounted () {
this.fetchPosts()
},
methods: {
fetchPosts: () => {
debugger;
this.$http.get('my-url')
.then(response => {
console.log(response)
})
}
}
...
I've seen a few github issues and SO posts which touch on this type of problem but most seem to relate to incorrect configuration which I don't think I have (happy to be proven wrong!)
The specific console error I get is:
Error in mounted hook: "TypeError: Cannot read property 'get' of undefined"
What's odd about this is that if you see my debugger line, if I console.log this.$http.get at that point I get:
function (url, options$$1) {
return this(assign(options$$1 || {}, {url: url, method: method$$1}));
}
If I let the code run and then attempt the console.log afterwards I get:
Cannot read property 'get' of undefined
As a result I presume it's some kind of this context issue, but from what I can see the reference should be correct...shouldn't it?
Methods should not be arrows function. The this will not point to the vue instance if a methods is declared using arrow function.
Use normal function instead:
methods: {
fetchPosts(){
debugger;
this.$http.get('my-url')
.then(response => {
console.log(response)
})
}
You can see the warning here