I am currently facing a weird issue with developing a simple chrome extension.
Basically, I want to build an extension that saves the currently focused URL. However, seems like URL is not saved in variables that I defined.
I have tried to use an array to store it, and also a variable.
consoleClick() {
var urlss = []
var getTab = function(tab){
urlss.push(tab)
alert(tab)
};
chrome.tabs.query({'active':true}, function(tabs){
getTab(tabs[0].url)
});
console.log(urlss)
this.$store.commit('addUrl',urlss[0])
console.log(this.$store.state.urls[0])
}
Here, once button is clicked, with "chrome.tabs.query()" I was able to get currently focused url. and I saved it to "urlss", and checked it with console.log(urlss).
I could see the url in console log, however, when I tried to access to url with urlss[0], it says urlss[0] is "undefined" even though I can see that
[]
0: "https://stackoverflow.com/posts/57089954/edit"
length: 1
__proto__: Array(0)
in log. This leads to push "undefined" to my vuex storage.
I also tried to push it to vuex storage right away in chrome.tabs.query(), however it gives me that $store is not defined.
I know that my explanation is pretty messy but I need help from the community! Thanks in advance
Related
Im following the tutorial here...
https://vue-tutorial.meteor.com/simple-todos/
But I get an error even just when installing the default vue meteor app.
meteor: {
$subscribe: {
'experiments': [],
},
experiments () {
return Experiments.find({}).fetch();
},
},
gives me an error
TypeError: Cannot read properties of undefined (reading 'find')"
If I console log Experiments, its there and I get the Meteor collection object. Any idea why this might be occuring??
import Experiments from '../../api/collections/Experiments'
console.log(Experiments)
Gives me
So its obviously an available object.
Just the find({}).fetch() method on it doesnt seem to be available??
UPDATE:
THE ANSWER BELOW WORKED (kind of)
experiments() {
let experimentsData = Experiments.find({}).fetch();
if (this.$subReady.experiments) {
console.log(experimentsData);
return experimentsData;
}
},
This now returns the experiments in the console log. So they are available. However rendering them to the template doesnt.
<h2>Experiments</h2>
<div v-for="exp in experiments" :key="exp.id">
{{exp.name}}
</div>
Any idea why??
Does it have to be put into a vue data object? Computed??
I thought the meteor:{} object acted kinda like computed, but it appears not??
How do I get the data onto the screen??
The answer is actually not correct.
I am experiencing the same issue from an out of the box meteor vue app created with: meteor create vanillaVueMeteor --vue
The error occurs if you define ANY function in the meteor: section of the default export (and bizarrely the first function defined is always being called regardless of whether it is actually referenced anywhere). This is obviously a bug either in the meteor vue creator or some combination of the default versions of meteor and vue libraries.
Additionally with respect to providing data to your template: you should not call fetch, just pass the result of the find which then means you won't need to wait for the subs to be ready because reactivity will update the view when the data is available. Obviously the underlying issue is preventing this all from working correctly.
UPDATE:
It seems to be an issue with 2.7.x Downgrading to the latest 2.6 worked for me:
meteor npm remove vue
meteor npm i vue#2.6 --save
It looks like you need to just use this.$subReady in your 'experiments` function to handle the timing of how the data comes in over DDP in Meteor.
I use something like this in all my subscriptions.
When the subscription starts up, the data won't be delivered from the publication the very 1st time, so that is what causes your undefined error that you are getting.
I love the Vue + Meteor combo. You can also come join the community Slack or Forum if you have questions, there are a bunch of us to help you there.
Happy Coding!
Bob
experiments () {
let experimentsData = Experiments.find({}).fetch();
if(this.$subReady.experiments){
return experimentsData;
}
},
This should resolve your issue in the UI. The HTML data will load and run before all the data from Meteor is ready, so you just use something like this:
<h2>Experiments</h2>
<div v-if="subReady.experiments" v-for="exp in experiments" :key="exp.id">
{{exp.name}}
</div>
So I'm currently trying to automate uploading a profile photo on an Electron App using Playwright and I'm running into issues with 'filechooser' event.
await windowA.click('data-testid');
const [fileChooser] = await Promise.all([
windowA.waitForEvent('filechooser'),
// windowA.locator('text=Edit').click(),
windowA.waitForTimeout(3000),
windowA.locator(selector).click(),
]);
The element used to upload a photo isn't an input type so I'm using
await fileChooser.setFiles(
[filepath],
{ timeout: 1000 }
);
The issue is trying to get playwright to select an image from the input dialog box that pops up and it just won't select any files. I've also been trying to get playwright to select an image in my fixtures folder, which is in a relative path to the test, but haven't had success in either case.
The error that Playwright is displaying is
page.waitForEvent: Timeout while waiting for event "filechooser"
waiting for event "filechooser"
Any know what the issue is?
My slippers told me that if you are using the window.showOpenFilePicker() to get a file from the user, you won't get the filechooser event at all. This is because internally, the showOpenFilePicker is not triggering an event as it is still a WIP.
More infos can be found there but I don't think there is a workaround for now
https://githubmemory.com/repo/microsoft/playwright/issues/8850
Pupetter has actually the same issue: https://github.com/puppeteer/puppeteer/issues/5210`
One fix would be to not use the showOpenFilePicker() at all, but instead rely on the <input> element to gather the file. This is a bit more cumbersome for the dev but is more supported and should trigger the 'filechooser' event.
Another fix could be to add a function you can override when running in test move for it to not even need to open the file chooser. Something like
getFileFromPicker() => {
if(!isRunningInTest) {
// do the showOpenFilePicker logic as usual in the app and the user will need to choose a file from it
} else {
// provide synchronously a buffer to use as file content, and so do not even show the picker to the testing user.
}
guys, I'm going through the VueJS tutorial for Auth0, and am getting this error:
InvalidTokenError {message: "Invalid token specified: Cannot read property 'replace' of undefined"}
message:"Invalid token specified: Cannot read property 'replace' of undefined"
The tutorial is here:
https://auth0.com/blog/vuejs2-authentication-tutorial/
The error is happening right when the app is supposed to bring up the Auth0 Lock widget.
Thoughts?
Clear your browser's local storage cache.
e.g
for Chrome, press F12 to go to developer window, Storage\Local Storage, right click and clear.
For IE, F12 to developer window. On 'Console' tab, run the command
localStorage.clear()
Sorry I cannot comment on your question because my rank is too low. I had the same error coming up when I followed the react version of you tutorial.
The issue in my case was due to the fact that in the auth.js file, there is a function called getTokenExpirationDate(encodedToken). Inside that function the line const token = decode(encodedToken); was the cause of the bug.
By investigating the value of encodedToken I found out that it's value was a string with the characters 'none', (not the value none itself!). This makes the encode function very unhappy.
If you go in the chrome developer tools, click on the Application tab, open the Local Storage option on the left hand side and select you site. You will be able to see all the key-value pairs stored in your local storage for your app. In my case the key id_token had the value none. If it's the case for you too, just delete that key/value pair from the local storage and the page should be able to load again.
Hope this helped and good luck!
Edit
By playing with local storage with chrome developer tools I realised the local storage can be a bit buggy. Sometimes I try to view the local storage but it doesn't appear. When that happens just try closing and reopening the tool.
I also was running into this issue. I had one rule called 'auth0-authorization-extension' activated that triggered this error.
This fixed it for me. It is in typescript. You can remove (token: string) to (token) if not using TS
function parseJwt (token: string) {
var base64Url = token.split('.')[0];
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
};
if you have token in another place, you can copy token in cookies.
you can find your token in Insomia software.
you can copy it
come back to browser and open inspect with F12
open cockies and paste token there
I'm developing a cross-platform browser extension, and have based all my code on the Chrome-way of doing this. I have counted on that the background page will be accessible from the options page, which in Safari extensions turns out to be not possible (since there is no such thing as an options-page). You can only access safari.extension.globalPage.contentWindow from within the extension popup, and the background page itself.
Now, I have an options page, which is an html-page within the extension bundle, and so far I haven't found a way for Safari to give it extension "rights". The closest I have come is adding a content script that's only added on the options page. This seems a bit silly, since the html page itself is in the extension bundle?!
Others have suggested using asynchronous ping-pong style message event handlers, and even the canLoad-mechanism (which is "only" able to run in a beforeload-event). I have been able to hack the canLoad-mechanism for synchronous messaging by forging the BeforeLoadEvent:
// Content script (run from anywhere)
var result = safari.self.tab.canLoad(new BeforeLoadEvent, "data")
-> "return value"
// Background page
safari.application.addEventListener('message', function(e) {
if ( e.name === "canLoad" )
e.message = "return value";
}, true);
It's a hack, but it works. However, I am crippled by the message transport serialization, since I need to be able access methods and data on my objects from the background page. Is there anyway around this?
Possible ways that might work but I don't know if possible:
Access options-page window-object from backgrounds page. Is that possible?
Message passing, need to bypass message serialization
Any shared/global object that I can attach objects to and fetch from the options page?
Make Safari run the options.html page from outside the content-script sandbox? It works in Chrome since they are both within the extension-bundle. It's quite annoying that safari doesn't do this too.
Run the options-page from within the popup. This is promising, but it crashes safari (which is very promising!). However, from the looks of it it's just something to do with a CSS animation in my options.html page. The biggest issue is that it has to be able to open an OAuth2 popup, but thanks to being able to programmatically open the popover, it might be a non-issue. However, this option is the most realistic, but I would rather have it open in a new tab.
Any suggestions and hackish workarounds would really help.
I'm using the chrome://favicon/ in my Google Chrome extension to get the favicon for RSS feeds. What I do is get the base path of linked page, and append it to chrome://favicon/http://<domainpath>.
It's working really unreliably. A lot of the time it's reporting the standard "no-favicon"-icon, even when the page really has a favicon. There is almost 0 documentation regarding the chrome://favicon mechanism, so it's difficult to understand how it actually works. Is it just a cache of links that have been visited? Is it possible to detect if there was an icon or not?
From some simple testing it's just a cache of favicons for pages you have visited. So if I subscribe to dribbble.com's RSS feed, it won't show a favicon in my extension. Then if I visit chrome://favicon/http://dribbble.com/ it won't return right icon. Then I open dribbble.com in another tab, it shows its icon in the tab, then when I reload the chrome://favicon/http://dribbble.com/-tab, it will return the correct favicon. Then I open my extensions popup and it still shows the standard icon. But if I then restart Chrome it will get the correct icon everywhere.
Now that's just from some basic research, and doesn't get me any closer to a solution. So my question is: Is the chrome://favicon/ a correct use-case for what I'm doing. Is there any documentation for it? And what is this its intended behavior?
I've seen this problem as well and it's really obnoxious.
From what I can tell, Chrome populates the chrome://favicon/ cache after you visit a URL (omitting the #hash part of the URL if any). It appears to usually populate this cache sometime after a page is completely loaded. If you try to access chrome://favicon/http://yoururl.com before the associated page is completely loaded you will often get back the default 'globe icon'. Subsequently refreshing the page you're displaying the icon(s) on will then fix them.
So, if you can, possibly just refreshing the page you're displaying the icons on just prior to displaying it to the user may serve as a fix.
In my use case, I am actually opening tabs which I want to obtain the favicons from. So far the most reliable approach I have found to obtain them looks roughly like this:
chrome.webNavigation.onCompleted.addListener(onCompleted);
function onCompleted(details)
{
if (details.frameId > 0)
{
// we don't care about activity occurring within a subframe of a tab
return;
}
chrome.tabs.get(details.tabId, function(tab) {
var url = tab.url ? tab.url.replace(/#.*$/, '') : ''; // drop #hash
var favicon;
var delay;
if (tab.favIconUrl && tab.favIconUrl != ''
&& tab.favIconUrl.indexOf('chrome://favicon/') == -1) {
// favicon appears to be a normal url
favicon = tab.favIconUrl;
delay = 0;
}
else {
// couldn't obtain favicon as a normal url, try chrome://favicon/url
favicon = 'chrome://favicon/' + url;
delay = 100; // larger values will probably be more reliable
}
setTimeout(function() {
/// set favicon wherever it needs to be set here
console.log('delay', delay, 'tabId', tab.id, 'favicon', favicon);
}, delay);
});
}
This approach returns the correct favicon about 95% of the time for new URLs, using delay=100. Increasing the delay if you can accept it will increase the reliability (I'm using 1500ms for my use case and it misses <1% of the time on new URLs; this reliability worsens when many tabs are being opened simultaneously). Obviously this is a pretty imprecise way of making it work but it is the best method I've figured out so far.
Another possible approach is to instead pull favicons from http://www.google.com/s2/favicons?domain=somedomain.com. I don't like this approach very much as it requires accessing the external network, relies on a service that has no guarantee of being up, and is itself somewhat unreliable; I have seen it inconsistently return the "globe" icon for a www.domain.com URL yet return the proper icon for just domain.com.
Hope this helps in some way.
As of Oct 2020, it appears chrome extensions using manifest version 3 are no longer able to access chrome://favicon/* urls. I haven't found the 'dedicated API' the message refers to.
Manifest v3 and higher extensions will not have access to the
chrome://favicon host; instead, we'll provide a dedicated API
permission and different URL. This results in being able to
tighten our permissions around the chrome:-scheme.
In order to use chrome://favicon/some-site in extension. manifest.json need to be updated:
"permissions": ["chrome://favicon/"],
"content_security_policy": "img-src chrome://favicon;"
Test on Version 63.0.3239.132 (Official Build) (64-bit)
chrome://favicon url is deprecated in favor of new favicon API with manifest v3.
// manifest.json
{
"permissions": ["favicon"]
}
// utils.js
function getFaviconUrl(url) {
return `chrome-extension://${chrome.runtime.id}/_favicon/?pageUrl=${encodeURIComponent(url)}&size=32`;
}
Source: https://groups.google.com/a/chromium.org/g/chromium-extensions/c/qS1rVpQVl8o/m/qmg1M13wBAAJ
I inspected the website-icon in Chrome history page and found this simpler method.
You can get the favicon url by --
favIconURL = "chrome://favicon/size/16#1x/" + tab.url;
Don't forget to add "permissions" and "content_security_policy" to Chrome. (https://stackoverflow.com/a/48304708/9586876)
In the latest version of Chrome, Version 78.0.3904.87 (Official Build) (64-bit)) when tested, adding just img-src chrome://favicon; as content_security_policy will still show 2 warnings:
'content_security_policy': CSP directive 'script-src' must be specified (either explicitly, or implicitly via 'default-src') and must whitelist only secure resources.
And:
'content_security_policy': CSP directive 'object-src' must be specified (either explicitly, or implicitly via 'default-src') and must whitelist only secure resources.
To get rid of them use:
"permissions": ["chrome://favicon/"],
"content_security_policy": "script-src 'self'; object-src 'self'; img-src chrome://favicon;"
Now you can use chrome://favicon/http://example.com without getting any errors or warnings.