I have been trying to create a Firefox add-on using the web extensions API. My add-on should take a screenshot of the current page the user is browsing using chrome.tabs.captureVisibleTab but it returns undefined. They say that its already implemented in the API on http://arewewebextensionsyet.com/ but I can't seem to get it to work.
Here is my code:
chrome.tabs.captureVisibleTab(null, {}, function(data) {
console.log("screenshotData: " + data);
});
I have also tried passing in a window.id as the first parameter even though in the docs it says its optional, but this also returns an undefined value for data.
Does anyone have any experience with this in particular?
It works for me in Nightly 49.0a1 (2016-06-04).
Make sure you have the following permission in your manifest.json file:
"permissions": [ "<all_urls>" ]
Related
I have been developing a browser extension in vaniall JS till now. I would like to use vite + Vue moving forward. Upon doing a google search I found this GitHub repository which help with this.
I'm trying to set the user preferences and save them in storage using storage.sync. But when I use browser.storage.sync.get, I get below error
Cannot read properties of undefined (reading 'sync')
How to solve this? What is the correct way to use storage.sync with
webextension-polyfill or #types/webextension-polyfill
Below is the code is have using vanilla js with is woring perfectly
chrome.storage.sync.get({ 'testData': MyTestData }, result => {
console.log(result);
})
Below is the way to use storage.sync using webextension-polyfill
import browser from "webextension-polyfill";
browser.storage.sync.set({ 'testData': MyTestData }, result => {
console.log(result);
})
I am trying to implement google pay on a website. The external library for google pay is loaded from pay.google.com. In this google script, they call the browser api PaymentRequest(). This api is built in popular browsers like Safari, Chrome, etc.
I have google pay working, but it does not work on Firefox. When the external script is loaded, it calls PaymentRequest and in the console the following error is shown:
ReferenceError: PaymentRequest is not defined
Link to google pay script
https://pay.google.com/gp/p/js/pay.js
Mozilla Firefox official webpage states that PaymentRequest is supported in secure context.
https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API
I copy and paste only the same code provided from the official source
From my perspective, PaymentRequest is not supported in Firefox and does not work. What am I missing?
Check out the console for both chrome and safari.
Google Pay is working for me on Firefox 78.0.1 on macOS using the following: https://jsfiddle.net/fw5t6caL/
Yes, it does log an error in the console at the following bit of code:
google.payments.api.UseCanMakePaymentResultFromPayjs && (new PaymentRequest([{
supportedMethods: [
'https://google.com/pay'
]
}
], {
total: {
label: 'Estimated Total Price',
amount: {
currency: 'USD',
value: '10'
}
}
})).canMakePayment().then(function (a) {
return ef = a
}).catch (function () {
return ef = !1
});
...but it does work. Are you able to try with the JSFiddle linked above?
Also, as an FYI, we've recently released a React and Web Component to simplify the Google Pay integration process. Consider using it as an alternative as it should make it easier to integrate.
Screenshot of JSFiddle output:
I am having the same Problem since a few days:
Uncaught ReferenceError: PaymentRequest is not defined
https://pay.google.com/gp/p/js/pay.js:272
This happens (I believe) in the Stripe Plugin for WooCommerce. The Error appears in Chrome and Firefox. No Idea at the Moment what I can do to fix it.
Does anyone know if Fine Uploader supports it's uploaderType: 'basic' mode in conjunction with an S3 endpoint?
Their documentation is a box of christmas lights and I can't make heads or tails about which options work with which versions of the uploader.
Using this code, and not including the #qq-template they provide, I get the error below:
var uploader = new qq.s3.FineUploader({
uploaderType: 'basic',
element: document.getElementById("fineUploader"),
request: {
endpoint: "mybucket.s3.amazonaws.com",
accessKey: "MY_AWS_PUBLIC_ACCESS_KEY"
},
signature: {
endpoint: "/s3/signtureHandler"
},
uploadSuccess: {
endpoint: "success.html"
}
});
Error: Cannot find template script at ID 'qq-template'!
However, according to their docs (Fine Uploader Getting Started) it seems as though this is the correct way to get rid of the UI and handle that myself. Except it doesn't work.
Thanks for any help.
You are confusing the jQuery plug-in workflow with the no-dependency workflow. Just like the traditional endpoint handler, you simply need to make use of the FineUploaderBasic constructor. As the documentation illustrates, all S3 endpoint handler modules are appropriately namespaced:
var uploader = new qq.s3.FineUploaderBasic({...
Fine Uploader supports a wide variety of workflow, endpoints, and features. It's tough to fit that all into the documentation in a way that is intuitive for 100% of our users. However, for the most part, the current setup has been well received. If you have a specific suggestion for improvement, please open up an issue in the GitHub project's issue tracker. We will soon make it easier for users to edit the documentation as well.
General Questions
Hello! I'm delving into the world of Chrome Extensions and am having some problems getting the overall workflow down. It seems that Google has recently switched to heavily advocating Event Pages instead of keeping everything in background.js and background.html. I take part of this to mean that we should pass off most of your extension logic to a content script.
In Google's Event Page primer, they have the content script listed in the manifest.json file. But in their event page example extension, it is brought in via this code block in background.js: chrome.tabs.executeScript(tab.id, {file: "content.js"}, function() { });
What are the advantages of doing it one way over the other?
My Code
I'm going forward with the programatic way of injecting the content script, like Google's example.
manifest.json
{
"manifest_version": 2,
"name": "Test",
"description": "Let's get this sucker working",
"version": "0.0.0.1",
"permissions": [
"tabs",
"*://*/*"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_icon": "icon.png"
}
}
background.js
chrome.browserAction.onClicked.addListener(function() {
console.log("alert from background.js");
chrome.tabs.executeScript({file: "jquery-2.0.2.min.js"}, function() {
console.log("jquery Loaded");
});
chrome.tabs.executeScript({file: "content.js"}, function() {
console.log("content loaded");
});
});
content.js
console.log('you\'r in the world of content.js');
var ans = {};
ans.createSidebar = function() {
return {
init: function(){
alert("why hello there");
}
}
}();
ans.createSidebar.init();
I am able to get the first 3 console.log statements to show up in the background page's debugger. I'm also able to get the alert from content.js to show up in any website. But I'm not able to see the console.log from content.js, nor am I able to view any of the JS from content.js. I've tried looking in the "content scripts" section of the background page debugger's Sources tab. A few other posts on SO have suggested adding debugger; statements to get it to show, but I'm not having any luck with anything. The closest solution I've seen is this post, but is done by listing the content script in the manifest.
Any help would be appreciated. Thanks!
Content scripts' console.log messages are shown in the web page's console instead of the background page's inspector.
Adding debugger; works if the Developer Tool (for the web page where your content script is injected) is opened.
Therefore, in this case, you should first activate the Developer Tool (of the web page) before clicking the browser action icon and everything should work just fine.
I tried to use the debuggermethod, but it doesn't not work well because the project is using require.js to bundle javascript files.
If you are also using require.js for chrome extension development, you can try adding something like this to the code base, AND change eval(xhr.responseText) to eval(xhr.responseText + "\n//# sourceURL=" + url);. (like this question)
Then you can see the source file in your dev tool (but not the background html window)
manifest v3
You can add console.log statements to your content scripts.
This is one of the best ways to debug an application.
Let's say you want to access a DOM node from the content script.
const node = document.querySelector("selector")
node will be Element instance if it exists else it will be null
If you can see the node in the Elements tab but not able to access it via content script then the node might have not been loaded at the time you accessed it.
Follow this answer to fix this issue.
I made a simple extension that contains a button, that when clicked, executes the following code:
chrome.experimental.clear.cache('everything', function() {
});
but the callback function never seems to get called. Am I using this API wrong or is it just broken?
Here's a link to the API doc for it:
http://code.google.com/chrome/extensions/experimental.clear.html#method-cache
Thanks!
The API has changed to chrome.experimental.browsingData.
I've just landed the documentation updates to go along with the code change: http://code.google.com/chrome/extensions/trunk/experimental.browsingData.html
Here's the most up to date documentation (chrome.browsingData.removeCache):
http://developer.chrome.com/trunk/extensions/browsingData.html#method-removeCache