Chrome Extension breaks Google Sheets - google-chrome-extension

I'm working on a chrome extension to log analytics for my use of Google Drive. I've used a webNavigation.onCompleted.addListener function to send analytics a page view, and it all works properly, except when it comes to sheets.
I'm gettting an intermittent failure to load sheets properly. However, nothing logs in the extension's console as an error - it shows everything is working properly. In the console for the sheet I'm trying to load, I'm getting two strange errors popping up.
The first (in all its glory) is:
Uncaught TypeError: Cannot read property 'setTimeout' of undefined
Mfb # 2046562200-ritz_waffle_i18n_core.js:2745
pN # 2046562200-ritz_waffle_i18n_core.js:2746
ggb # 2046562200-ritz_waffle_i18n_core.js:2757
fxb # 2046562200-ritz_waffle_i18n_core.js:3558
r.load # 2046562200-ritz_waffle_i18n_core.js:3555
loadWaffle # edit:163
w2b # ritz-0.js:1465
KGb # ritz-0.js:990
g # ritz-0.js:2
jC # ritz-0.js:649
mC # ritz-0.js:652
(anonymous function) # ritz-0.js:651
AGb # ritz-0.js:3
(anonymous function) # ritz-0.js:7622
(anonymous function) # VM3274:1
m # edit:110
(anonymous function) # edit:111
d # edit:107
(anonymous function) # edit:108
And the second is:
Uncaught TypeError: Cannot read property 'Yu' of undefined
r.jLa # 2046562200-ritz_waffle_i18n_core.js:361
I'm having trouble understanding what's creating this problem. My code isn't modifying any headers, and only triggers once web navigation is complete. Here's the function that seems to be causing this issue:
chrome.webNavigation.onCompleted.addListener(
// callback
function(info) {
console.log("webNavigation Complete - Docs");
console.log(info.url);
var fields = { hitType:'pageview'};
chrome.pageAction.show(info.tabId);
// check for editor of docs, sheets, slides, etc.
if (info.url.indexOf('docs') > -1 && info.url.indexOf('/d/') > -1) {
var start = info.url.indexOf('.com/')+5;
var end = info.url.indexOf('/',start+1);
var type = info.url.substring(start,end);
start = end+2;
end = info.url.indexOf('/',start+1);
var docId = info.url.substring(start,end);
fields['page'] = docId;
ga('send','event',type,'Load');
}
// check for editor of docs, sheets, slides, etc.
if (info.url.indexOf('macros') > -1 && info.url.indexOf('/d/') > -1) {
console.log('Apps-Script');
ga('send','event',type,'Apps-Script');
}
if (info.url.indexOf('drive') > -1 ){
fields['page'] = '/drive';
}
if (fields.page) {
var tabId = info.tabId;
chrome.pageAction.show(tabId);
chrome.tabs.get(tabId,function(tab) {
fields['title'] = tab.title;
console.log(fields);
//ga('send',fields);
});
}
},
//filters
{url:[{hostContains:'docs.google.com'},
{hostContains:'drive.google.com'}]
});

Related

Chrome extension Unexpected Identifier in Content Script

I have a problem. I cannot access variable that I created in content script in chrome console.
Here are my my codes.
Content script code:
var data = []
var x = document.querySelector('div.A3dMNc').innerText
var y = document.querySelector('span.ryNqvb').innerText
if data.includes(x){
console.log('alreade included!!!')
} else {
data.push({ "surah": x, "maksud": y })
console.log(x + ' --> ' + y)
console.log(data)
console.clear()
}
I got error:
Uncaught SyntaxError: Unexpected identifier 'data' (at script.js:7:6)
I want to collect data into the array of data.

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:81/controllers/chatController

Currently, I am connecting a one to one chat with mongodb.Atlas cluster. I have a script.js file and I'm trying to call controller's function from there. I am receiving the following error...
I have tried to import the controller
let log = import('../controllers/chatController');
and whenever the msg is sent from a user
$scope.sendMsg = ($event) => {
const keyCode = $event.which || $event.keyCode;
if (keyCode === 13 && $scope.message !== null) {
socket.emit('getMsg',{
toid : $scope.selectedUser,
msg : $scope.message,
name : $scope.username
});
log.createListing($scope);
$scope.message = null;
}
};
Following is the directory
Any idea how to import chatController? So that I could use createListing function?
You might just have to add .js extension.
Update your utils/routes.js with database code instead, because at the moment you're putting DB logic into browser JS.

Slack node js program running session shut down

Sorry to disturb. I am programming a Slack robot to reply user message by using the API
In the morning, it works totally okay. Then after I returned back from my office it just shut down and show me this error
Jiatongs-MacBook-Pro:news-bot jiatongli$ node index.js
Assertion failed: token must be defined
/Users/jiatongli/Desktop/news-bot/node_modules/vow/lib/vow.js:105
throw e;
^
Error: not_authed
at _api.then.fail (/Users/jiatongli/Desktop/news-bot/node_modules/slackbots/index.js:46:33)
at Array.<anonymous> (/Users/jiatongli/Desktop/news-bot/node_modules/vow/lib/vow.js:773:56)
at callFns (/Users/jiatongli/Desktop/news-bot/node_modules/vow/lib/vow.js:24:35)
at process._tickCallback (internal/process/next_tick.js:61:11)
Emitted 'error' event at:
at _api.then.fail (/Users/jiatongli/Desktop/news-bot/node_modules/slackbots/index.js:46:19)
at Array.<anonymous> (/Users/jiatongli/Desktop/news-bot/node_modules/vow/lib/vow.js:773:56)
at callFns (/Users/jiatongli/Desktop/news-bot/node_modules/vow/lib/vow.js:24:35)
at process._tickCallback (internal/process/next_tick.js:61:11)
Jiatongs-MacBook-Pro:news-bot jiatongli$
I personally have no idea what is going on because it seems like the program itself do not have bug. What i miss?
Here is the code in my index.js file:
var SlackBot = require("slackbots");
var request = require("request");
var NewsAPI = require("newsapi");
var unirest = require("unirest");
var API_KEY = process.env.API_KEY;
var Slack_API = process.env.Slack_API;
// create a bot
var bot = new SlackBot({
token: Slack_API,
name: "aloha-ai"
});
bot.on("message", msg => {
switch (msg.type) {
case "message":
// we only want to listen to direct messages that come from the user
if (msg.channel[0] === "D" && msg.bot_id === undefined) {
getRandomTechNews(postMessage, msg.user)
}
break
}
})
const postMessage = (message, user) => {
bot.postMessage(user, message, {
as_user: true
});
}
const getRandomTechNews = (callback, user) => {
unirest.get("https://nuzzel-news-v1.p.rapidapi.com/news?count=10&q=product")
.header("X-RapidAPI-Host", "nuzzel-news-v1.p.rapidapi.com")
.header("X-RapidAPI-Key", API_KEY)
.end(function (response) {
var newsJSON = response.body;
var news = "*Viral News* in product : \n\n\n\n";
for (i = 0; i < newsJSON.results.stories.length; i++) {
news += "_Excerpt:_ \n" + ">" + newsJSON.results.stories[i].excerpt + "\n"
news += "_Let's see the article!_ \n" + newsJSON.results.stories[i].url + "\n\n\n"
};
callback(news, user);
});
}
Your error message seems to indicate that your program is not authenticated with the Slack API: Error: not_authed
Since you are retrieving your API key and token from environment variables:
var API_KEY = process.env.API_KEY;
var Slack_API = process.env.Slack_API;
my guess is that you have started a new terminal session where you have not yet set that environment variable, or you are on a different computer where it is not set.
Before running your program, try exporting those variables from the command line:
export API_KEY=<my-api-key>
export Slack_API=<my-token>
If you have security concerns about your API keys showing up in your bash history you can do one of two things (these are examples of things that I do, but there are probably better, safer practices out there):
You can put an empty space before your command [space]export API_KEY=<my-api-key> instead of export API_KEY=<my-api-key>. This will make it so the command does not show up in your history.
You can put your export commands in a separate file called e.g., ~/.secrets and then run the command source ~/.secrets which will run your export commands.
Probably these will give you a sense of security rather than actual security though, since you can just echo the value of the environment variables, but I personally like taking one of these steps as an extra precaution.
i use this answer and can solve it.
Add a bot https://my.slack.com/services/new/bot and put the token
do you get token for your bot from above url:
did you set this ?

Uncaught TypeError: game.cache.getSound(...).play is not a function when retrieving sound from Phaser.Cache

I have a phaser game with 2 different states, ie the preloadState and the gameState. The sound files were loaded first using Phaser.Loader in the preloadState. However, upon finished loading and entering gameState, I am not able to retrieve the said sound file.
Call stack:
Uncaught TypeError: this.cache.getSound(...).play is not a function
(anonymous function) # game.js:232
Phaser.SignalBinding.execute # phaser.js:29960
Phaser.Signal.dispatch # phaser.js:29765
Phaser.Events.(anonymous function) # phaser.js:44440
Phaser.InputHandler._pointerOverHandler # phaser.js:40080
Phaser.Pointer.processInteractiveObjects # phaser.js:38363
Phaser.Pointer.move # phaser.js:38275
Phaser.Mouse.onMouseMove # phaser.js:36385
_onMouseMove # phaser.js:36275
Below is my code:
preload.js
var preloadState = {
preload: function() {
// set preload sprite here
// ...
// Audio files
this.load.audio('button_click','assets/button_click.ogg');
},
create: function() {
this.button_click_sound = this.add.audio('button_click');
}
game.js
var gameState = {
create:function() {
game.cache.getSound('button_click').play(); // Error here
}
main.js
var game = new Phaser.Game(432,800,Phaser.AUTO);
game.state.add('gameState', gameState);
game.state.add('preloadState', preloadState);
game.state.start('preloadState');
According to http://phaser.io/docs/2.2.2/Phaser.Cache.html#getSound, the getSound method returns Phaser.Sound object, but its play() method is not callable?
Can you try this?
var gameState = {
create:function() {
var button_sound = game.add.audio('button_click');
button_sound.play();
}
}
I think I have figured out the reason why the play() method is not accessible.
The cache stores the audio data in the form of objects but not Phaser.Sound instances, and hence the method cannot be called.
The code where the object creation and insertion into the cache can be found in the addSound method in Phaser.Sound:
this._cache.sound[key] = {
url: url,
data: data,
isDecoding: false,
decoded: decoded,
webAudio: webAudio,
audioTag: audioTag,
locked: this.game.sound.touchLocked
};
Also I think the doc for this method Phaser.Cache#getSound should be updated to not use Phaser.Sound as return value but the sound object.

Cannot use npm module react-chartjs with React

I'm new to npm and React. I have an application that uses a React UI and I want to include some charts using react-chartjs.
In my app.jsx file I try to create a bar chart:
var BarChart = require("react-chartjs").Bar;
var chartData = {
...
};
var CategorySummaryGraph = React.createClass({
render: function() {
return (
<BarChart data={chartData} width="600" height="250"/>
);
}
});
I bundle using gulp and browserify:
var gulp = require('gulp');
var react = require('gulp-react');
var browserify = require('gulp-browserify');
gulp.task('bundle-jsx', function() {
return gulp.src('./myapp/static/jsx/*.jsx')
.pipe(react())
.pipe(browserify())
.pipe(gulp.dest('./myapp/static/js/'));
});
This gives me an error when loading the page in the browser:
Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.
invariant # react.js:18405
ReactOwner.addComponentAsRefTo # react.js:13256
attachRef # react.js:14174
ReactRef.attachRefs # react.js:14190
attachRefs # react.js:14051
assign.notifyAll # react.js:1045
ON_DOM_READY_QUEUEING.close # react.js:13934
Mixin.closeAll # react.js:16693
Mixin.perform # react.js:16634
batchedMountComponentIntoNode # react.js:11998
Mixin.perform # react.js:16620
ReactDefaultBatchingStrategy.batchedUpdates # react.js:9140
batchedUpdates # react.js:14853
ReactMount._renderNewRootComponent # react.js:12133
ReactPerf.measure.wrapper # react.js:13366
ReactMount.render # react.js:12222
ReactPerf.measure.wrapper # react.js:13366
(anonymous function) # myapp.js:23474
m.Callbacks.j # jquery-1.11.3.min.js:2
m.Callbacks.k.fireWith # jquery-1.11.3.min.js:2
m.extend.ready # jquery-1.11.3.min.js:2
J # jquery-1.11.3.min.js:2
From the error message it seems to me like the BarChart doesn't have a render method... which obviously can't be the case if react-chartjs works at all. I'm not sure where to go with this so any help would be much appreciated.
I had been defining React by including it on my html page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
What fixed the problem was requiring it instead in my .jsx file:
var React = require("react");
Not sure why this worked but from reading around, perhaps there were multiple initializations and/or definitions of React that were causing conflicts.
Thanks #Daniel for pointing me in the right direction.

Resources