I've been trying to make Firefox Extension which needs to have an ability for user to record a voice message.
I've made a web page which does work, but when I put the same code in the extension (with all the proper manifest.json changes), it doesn't work. It simply doesn't ask user for access to microphone.
I went through extension examples on Firefox site but I can't find the solution.
How can the extension, if it can, access users microphone?
Code:
window.addEventListener('load', initAudio);
And the initAudio function:
function initAudio() {
console.log("initAudio");
if (!navigator.getUserMedia)
navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mediaDevices.mozGetUserMedia;
if (!navigator.cancelAnimationFrame)
navigator.cancelAnimationFrame = navigator.webkitCancelAnimationFrame || navigator.mozCancelAnimationFrame;
if (!navigator.requestAnimationFrame)
navigator.requestAnimationFrame = navigator.webkitRequestAnimationFrame || navigator.mozRequestAnimationFrame;
console.log("initAudio");
navigator.mediaDevices.getUserMedia(
{
"audio": {
"mandatory": {
"googEchoCancellation": "false",
"googAutoGainControl": "false",
"googNoiseSuppression": "false",
"googHighpassFilter": "false"
},
"optional": []
},
}, gotStream, function (e) {
console.log('Error getting audio');
$("#controls").css("background", "red");
console.log(e);
});
}
I don't get console output
Error getting audio
But I also don't get the console output from gotStream function.
Later, I have an HTML object which triggers the recording process:
<img id="record" src="./res/icons/mic.png" class="">
with it's accompanying Javascript code:
$(document).ready(function () {
$("#record").click(function () {
console.log("trigerred", this);
toggleRecording(this);
});
});
function toggleRecording does get trigerred properly, but it can't work since Recorder object is not initalized (it gets initalized in gotStream function).
Here is the manifest.json file:
{
"manifest_version": 2,
"name": "Speech",
"version": "1.1",
"description": "blank desript",
"icons": {
"16": "popup/res/icons/icon16.png",
"32": "popup/res/icons/icon32.png",
"48": "popup/res/icons/icon48.png",
"128": "popup/res/icons/icon128.png"
},
"permissions": [
"storage"
],
"browser_action": {
"default_icon": {
"32": "popup/res/icons/icon.png"
},
"default_title": "Speech",
"default_popup": "popup/popup.html"
},
"content_scripts": [
{
"js": [
"popup/res/script/jquery-3.2.1.js",
"popup/res/script/audiodisplay.js",
"popup/res/script/recorder.js",
"popup/res/script/recorderWorker.js",
"popup/res/script/resampler.js",
"popup/res/script/main.js"
],
"matches": [ "<all_urls>" ],
"match_about_blank": true,
"all_frames": true
}
],
"content_security_policy": [
"script-src 'unsafe-inline'"
]
}
Related
I created a js script that goes with my popup.html for a chrome browser extension I'm working on. It listens for a change in a slider value on the HTML and then sends a message to the content.js script with the new data. However, it seems I can't use sendMessage in this script. I'm using manifest v3.
Here's my js:
var slider = document.getElementById("slider");
let value = slider.value;
//function is called when the slider moves
changeSlider = function() {
value = slider.value;
update();
}
update = function() {
chrome.runtime.sendMessage({ message: "update", data: value });
}
Here's my manifest:
{
"manifest_version": 3,
"name": "e",
"version": "0.1",
"author": "e",
"homepage_url": "https://www.example.com",
"permissions": [
"contextMenus",
"activeTab",
"nativeMessaging"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["src/content.js"]
}],
"web_accessible_resources": [
{
"resources": ["src/*"],
"matches": ["<all_urls>"],
"use_dynamic_url": true
}],
"background": {
"service_worker": "src/background.js"
},
"action":
{
"default_popup": "src/popup.html",
"default_icon": "src/resources/icon.png"
},
"icons": {
"16": "src/resources/icon-16.png",
"32": "src/resources/icon-32.png",
"48": "src/resources/icon-48.png",
"128": "src/resources/icon-128.png"
}
}
And here's the console error I get whenever I adjust the slider:
additionally, my interpreter doesn't autofill chrome.runtime, so I assume something went wrong there. Help :D
I am currently building a web extension and in the stage of porting between browsers. On moving from Chrome to Firefox I am coming against an issue in using the runtime.sendMessage API that allows me to talk between the content and background scripts.
The message code in the content script:
browser.runtime.sendMessage('d089938d-ba63-4c40-98ab-b8515db1bbca', { greeting: "screenshot-please" }, function (response) {
localStorage.setItem("image", response.farewell);
});
var image = localStorage.getItem("image");
The Background script:
var img = saved-image;
browser.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if(request.greeting === "screenshot-please"){
sendResponse({
farewell: img
});
}
}
);
and the manifest:
{
"description": "...",
"manifest_version": 2,
"name": "...",
"permissions": [
"find",
"tabs",
"activeTab",
"<all_urls>"
],
"applications": {
"gecko": {
"id": "..."
}
},
"background": {
"scripts": ["/JavaScript/moz-initialPopup.js"]
},
"content_scripts": [
{
"all_frames": true,
"matches": ["*://127.0.0.1:3000/*"],
"js": ["Javascript/dataGrab.js"]
}
],
"icons": {
"48": "..."
},
"browser_action": {
"browser_style": true,
"default_title": "...",
"default_icon": {
"48": "..."
}
},
"version": "1.0"
}
When in chrome (replace all instances of *browser with *chrome) this messaging system works fine. When in firefox, in the developer tools I get 'ReferenceError: browser is not defined'.
Can anyone assist me in why I would not be able to access the browser here?
I'm building an extension that will store a token from a chrome tab (it will take the token once you finish loading that particular tab).
When running the extension (It is run by a press of the button) it is supposed to "get" the token and use it to create an ajax call.
This is a simple explanation of what it does; this is the code:
background.js :
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: 'h' }
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
manifest:
{
"name": "Page action by URL",
"version": "1.0",
"description": "Shows a page action for urls which have the letter 'g' in them.",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_icon": "images/icon32.png",
"default_title": "linkedin URL!",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js" : ["getToken.js"],
"run_at":"document_end"
}
],
"permissions": [
"storage",
"activeTab",
"tabs",
"<all_urls>",
"cookies",
"declarativeContent",
"http://*/*",
"https://*/*"
],
"icons" : {
"48" : "images/icon32.png",
"128" : "images/icon32.png"
},
"manifest_version": 2
}
getToken.js: [Content script]
if(document.getElementById('HrmsTkn')){
chrome.storage.local.set({ 'HrmsTkn': document.getElementById('HrmsTkn').value});
chrome.storage.local.get('HrmsTkn', function(result){
alert('Got it' + result.HrmsTkn);
});
}
and popup.js (button activation function):
$(function () {
$('#btnGetHtml').click(function () {
var token;
chrome.storage.local.get('HrmsTkn', function (items) {
if(items){
token = items.HrmsTkn;
}
});
try {
alert(token);
}
catch(e) {
}
});
});
I get the following error in devTools and undefined alerted once the button is clicked, also I checked the storage area of the extension using StorageAreaExtension which shows the extension has the value I'm trying to get.
And when I debug it, in the storage.local.get function, it throws the following error:
Lazy require of extension.binding did not set the binding field
extensions::lastError:82: Uncaught TypeError: Cannot convert undefined
or null to object{TypeError: Cannot convert undefined or null to
object
Any ideas why? I've looked up google for the past few days but did not find any reliable fix.
I am trying to develop a chrome extension however while trying to add an EventListener on the copy action it does not work (though supported by the browser because it is working on fiddle).
here are my different files.
manifest.json
{
"manifest_version": 2,
"name": "Bla",
"description": "bla",
"version": "1.0",
"browser_action": {
"default_icon": "camera.png",
"default_title": "bla"
},
"background": {
"page": "background.html"
},
"content_scripts" : [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["oncopy.js"]
}
],
"permissions": [
"activeTab",
"https://ajax.googleapis.com/",
"clipboardRead",
"clipboardWrite"
]
}
oncopy.js
document.addEventListener("copy", function() {
alert('copied')
}, true);
The alert never pops up.
I also tried with a similar code inside a background.js file called by background.html but didn't work either... Any ideas ?
Try this
document.addEventListener('readystatechange', function(evt) {
if (evt.target.readyState === "complete") {
document.addEventListener("copy", function() {
alert('copied')
}, true);
}
}, false);
I'm trying to create a plugin, that uses chrome.tabs.getSelected to find current URL,
Below I attached a minimal example, when any key is pressed, a dialog will popup, but it kept telling me chrome.tabs.getSelected is undefined:
Manifest file:
{
"content_scripts": [
{
"matches": ["http://*/*" , "https://*/*"],
"js" : [ "main.js" ]
}
],
"manifest_version": 2,
"description": "XX",
"icons": {
"128": "icon.png",
"16": "button.png",
"32": "button.png",
"48": "icon.png"
},
"name": "XX",
"permissions": [ "tabs", "http://*/*", "https://*/*" ],
"version": "1.2"
}
And main.js:
window.addEventListener("keyup", function(e) {
chrome.tabs.getSelected(null, function(tab) { // undefined
alert (tab.url);
});
} , false);
Chromium version: Version 21.0.1180.89 (154005)
EDIT
window.addEventListener("keyup", function(e) {
chrome.tabs.query( {active:true}, function(tab) {
alert (tab.url);
});
} , false);
I really don't get it now, tabs.query doesn't work either.
EDIT: Sorry, just realized you can't use chrome.tabs in a content script. You'll have to message the extension's background page for access to that. Here's some info about messaging: https://developer.chrome.com/extensions/messaging.html.