Chrome Extension using React limited to popover - reactjs

I'm currently building a chrome extension using React. The problem is, react only runs if I clicked the popup. Also when I tried to modify the page by inserting something, it only shows in popover. Did I missed something? If I tried it in content_script, it works fine. Here's my manifest.json.
"short_name": "Extension",
"name": "My Extension",
"permissions": ["activeTab", "storage", "tabs", "*://*/*"],
"manifest_version": 2,
"version": "0.0.1",
"browser_action": {
"default_popup": "index.html",
"default_title": "My Extension"
},
"content_scripts": [
{
"run_at": "document_idle",
"matches": ["http://*/*", "https://*/*"],
"js": [
"content_script.js"
"static/js/main.js"
]
}
],
"background": {
"scripts": [""background.js"],
"persistent": false
}
}
fyi: static/js/main.js is a minified file. I modified the webpack so it will stay as main.js.

Related

manual deployment getting an error "app.json must include a JSON object "

I was trying to do a manual deploy tody of my react-native project and I keep getting this error
[15:52:27] app.json must include a JSON object.
[15:52:27] Error: app.json must include a JSON object
I have read every single topic regarding this issue and could not find a solution, any thoughts?
{
"expo": {
"name": "*********",
"slug": "*********",
"privacy": "public",
"sdkVersion": "33.0.0",
"platforms": [
"ios",
"android"
],
"version": "1.0.91",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "cover",
"backgroundColor": "#ffffff"
},
"updates": {
"*****************": 0
},
"assetBundlePatterns": ["assets/*"],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.*********.******",
"config": {
"usesNonExemptEncryption": false
}
},
"android": {
"package": "com.*********.**********",
"versionCode": 91,
"permissions": [
"NOTIFICATIONS",
"LOCATION",
"ACCESS_NETWORK_STATE",
"VIBRATE"
]
},
"description": "READY FOR TESTING"
}
}
In my case it was permission issue. Just try the admin mode of PowerShell or terminal.
I was having the same issue. Running with elevated privileges did not solve my issue. However, placing ios and android directly below the sdkVersion solved my issue. E.g.
{
"expo": {
"name": "*********",
"slug": "*********",
"privacy": "public",
"sdkVersion": "33.0.0",
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.*********.******",
"config": {
"usesNonExemptEncryption": false
}
},
"android": {
"package": "com.*********.**********",
"versionCode": 91,
"permissions": [
"NOTIFICATIONS",
"LOCATION",
"ACCESS_NETWORK_STATE",
"VIBRATE"
]
},
"platforms": [
"ios",
"android"
],
"version": "1.0.91",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "cover",
"backgroundColor": "#ffffff"
},
"updates": {
"*****************": 0
},
"assetBundlePatterns": ["assets/*"],
"description": "READY FOR TESTING"
}
}

i want to make the standalone mobile application for ios

i have made a project in expo for android as well as ios but when i
try to make the standalone application for ios it shows me a error
"Your project must have a bundleIdentifier set in app.json. See
https://docs.expo.io/versions/latest/distribution/building-standalone-apps/#2-configure-appjson"
but in the app.json file in ios section i give it a field named
bundleIdentifier and i givethe same value to the android package and
the value is ""com.react.myappname"". but is just shows me the same
error again and again. i am making this build using windows 10,help
me on that.
{ "expo": {
"name": "com.projectname.app",
"description": "This project is really great.",
"slug": "projectname",
"privacy": "public",
"sdkVersion": "31.0.0",
"platforms": ["ios"],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/iconios.png",
"splash": {
"image": "./assets/splashios.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"bundleIdentifier":"com.react.projectname"
},
},
"expo": {
"name": "com.projectname.app",
"description": "This project is really great.",
"slug": "projectname",
"privacy": "public",
"sdkVersion": "31.0.0",
"platforms": [ "android"],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/playstore-icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"android": {
"package":"com.react.projectname",
"config": {
"googleMaps": {
"apiKey": "AIzaSyD4KuDsSesrWf_iDn3WDTnwxqekZoC9qk0"
}
}
} } }
Heading
For ios you need to set your bundleIdentifier also in Xcode.. and in Windows10 Xcode not available. you need mac for building & running ios app.
First of all you can't do that in windows environment. Either you need to a virtual machine set up in your windows machine or explicitly a ios machine borrowed from a friend. And then you need Xcode installed in it. All the development projects' builds create a file that can be open inside Xcode. Then only you can run it on an ios emulator or debug using a real iphone device.

Chrome Debugger extension in VS Code will not display a html file

I started to learn angular and created a simple project in Visual Studio and it ran fine there. It is only one html file and a separate JS file. I decided to try Visual Studio Code as this looks like a better environment to code in for front end work.
But for the life of me I cannot get the Chrome debugger to display the page.
Here is the current launch.json (tried several changes to url and webroot to no luck):
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:9222/index.html",
"webRoot": "${workspaceRoot}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}
I can get chrome to launch and connect but I get a completely blank page. I can then go to Localhost/json which gives me this:
[ {
"description": "",
"id": "2c0aed08-5bf3-4186-9ad6-9af1bc9e500c",
"title": "localhost:9222/index.html",
"type": "page",
"url": "http://localhost:9222/json"
}, {
"description": "",
"devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/ccfbea86-ec75-434e-9ae0-749eba4cbf2b",
"id": "ccfbea86-ec75-434e-9ae0-749eba4cbf2b",
"title": "Chrome Media Router",
"type": "background_page",
"url": "chrome-extension://pkedcjkdefgpdelpbcmbmeomcjbeemfm/_generated_background_page.html",
"webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/ccfbea86-ec75-434e-9ae0-749eba4cbf2b"
} ]
I have no clue at this point what to try or really how to debug or look at what might be causing this. Any help or direction would be greatly appreciated.
I am not sure this is the correct answer. But changing the launch.json to include the file itself worked. I can now debug and view my pager in the browser window. Also turning on the diagnosticLogging allowed me to see the how it was doing some of the mapping.
{
"name": "Launch Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:9222/",
"webRoot": "${workspaceRoot}\\",
"file": "${workspaceRoot}/index.html",
"diagnosticLogging": true
}

Ionic Build Android command fails with an exception after trying to add ngCordova calendar plugin

I am working ionic(1.7.15) in ubuntu.
My project works fine until i try to implement calendar plugin. After installing this plugin to my project and i try to build with ionic build android command but i am getting the following error.
UNEXPECTED TOP-LEVEL EXCEPTION:
com.android.dex.DexException: Multiple dex files define Landroid/support/v4/accessibilityservice/AccessibilityServiceInfoCompat$AccessibilityServiceInfoVersionImpl;
I hope the above error occurs due to multiple plugin in my project is there any solution. I found this error is related to multidex from here.
What i have tried:
I have tried the upgrading my android SDK.
Using this stack-overflow question Could not resolve all dependencies for configuration ':_armv7DebugCompile' i have done all after that i am getting the above error.
Here is my package.json file
{
"name": "app",
"version": "1.1.1",
"description": "app: An Ionic project",
"dependencies": {
"gulp": "^3.5.6",
"gulp-sass": "^2.0.4",
"gulp-concat": "^2.2.0",
"gulp-minify-css": "^0.3.0",
"gulp-rename": "^1.2.0"
},
"devDependencies": {
"bower": "^1.3.3",
"gulp-util": "^2.2.14",
"shelljs": "^0.3.0"
},
"cordovaPlugins": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"ionic-plugin-keyboard",
{
"locator": "https://github.com/rossmartin/PushPlugin.git",
"id": "com.phonegap.plugins.PushPlugin"
}
],
"cordovaPlatforms": [
"android"
]
}
Here is my fetch.json file
{
"cordova-plugin-device": {
"source": {
"type": "registry",
"id": "cordova-plugin-device#~1.1.1"
},
"is_top_level": true,
"variables": {}
},
"cordova-plugin-console": {
"source": {
"type": "registry",
"id": "cordova-plugin-console#~1.0.2"
},
"is_top_level": true,
"variables": {}
},
"cordova-plugin-whitelist": {
"source": {
"type": "registry",
"id": "cordova-plugin-whitelist"
},
"is_top_level": true,
"variables": {}
},
"cordova-plugin-splashscreen": {
"source": {
"type": "registry",
"id": "cordova-plugin-splashscreen"
},
"is_top_level": true,
"variables": {}
},
"cordova-plugin-statusbar": {
"source": {
"type": "registry",
"id": "cordova-plugin-statusbar#~2.1.0"
},
"is_top_level": true,
"variables": {}
},
"ionic-plugin-keyboard": {
"source": {
"type": "registry",
"id": "ionic-plugin-keyboard"
},
"is_top_level": true,
"variables": {}
},
"cordova-plugin-camera": {
"source": {
"type": "registry",
"id": "cordova-plugin-camera"
},
"is_top_level": true,
"variables": {}
},
"phonegap-plugin-push": {
"source": {
"type": "registry",
"id": "phonegap-plugin-push"
},
"is_top_level": true,
"variables": {}
},
"com.phonegap.plugins.PushPlugin": {
"source": {
"type": "git",
"url": "https://github.com/phonegap-build/PushPlugin.git",
"subdir": "."
},
"is_top_level": true,
"variables": {}
},
"cordova-plugin-datepicker": {
"source": {
"type": "git",
"url": "https://github.com/VitaliiBlagodir/cordova-plugin-datepicker.git",
"subdir": "."
},
"is_top_level": true,
"variables": {}
},
"cordova-plugin-calendar": {
"source": {
"type": "registry",
"id": "cordova-plugin-calendar"
},
"is_top_level": true,
"variables": {}
},
"cordova-plugin-crosswalk-webview": {
"source": {
"type": "registry",
"id": "cordova-plugin-crosswalk-webview"
},
"is_top_level": true,
"variables": {}
}
}
I have no idea about what went wrong please anyone help me.
Your problem is you are using an outdated version of the push plugin. From your package.json, you are including https://github.com/rossmartin/PushPlugin.git which is a unmaintained branch of a deprecated plugin that hasn't been updated in 2 years. Hence, if you look at its plugin.xml, you can see it includes the Android Support Library as a JAR for the legacy Ant-driven Cordova build process:
<source-file src="src/android/com/plugin/android-support-v13.jar" target-dir="libs/" />
You need to remove this version of the plugin and replace it with the up-to-date equivalent cordova-plugin-push, which uses Gradle to include the support library:
<framework src="com.android.support:support-v13:23+" />
Note you will need to build for Android API v23, so must have this installed via the SDK Manager and be using v5+ of the Cordova Android platform (cordova-android#5+).
UPDATE
In build.gradle file i add this lines.
In dependencies add this line compile 'com.android.support:multidex:1.0.1'
dependencies {
compile fileTree(dir: 'libs', include: '*.jar')
// SUB-PROJECT DEPENDENCIES START
debugCompile project(path: "CordovaLib", configuration: "debug")
releaseCompile project(path: "CordovaLib", configuration: "release")
compile "com.android.support:support-v4:+"
// SUB-PROJECT DEPENDENCIES END
compile 'com.android.support:multidex:1.0.1'
}
default config add this line multiDexEnabled true
defaultConfig {
versionCode cdvVersionCode ?: Integer.parseInt("" + privateHelpers.extractIntFromManifest("versionCode") + "0")
applicationId privateHelpers.extractStringFromManifest("package")
if (cdvMinSdkVersion != null) {
minSdkVersion cdvMinSdkVersion
}
multiDexEnabled true
}
After adding this lines then i got his error reffer this website and i solved it by removing platform/android/libs/ You can see "android-support-v13.jar" delete that file
all your plugin that have been installed for project look for plugin.xml file and then check any line that reefer to that android-support-v13.jar and comment it or do as above, thank you
Here is an easy of-the-shelf plugin that does the build.gradle work for you
cordova plugin add cordova-plugin-enable-multidex
Please find this repository link for some further details

Sencha buil MVC3 file

I am unable to run sencha build command for my MVC application in ExtJs. but sencha create jsb command has successfully generated the file
{
"projectName": "Project Name",
"licenseText": "Copyright(c) 2011 Company Name",
"builds": [
{
"name": "All Classes",
"target": "all-classes.js",
"options": {
"debug": true
},
"files": []
},
{
"name": "Application - Production",
"target": "app-all.js",
"compress": true,
"files": [
{
"path": "",
"name": "all-classes.js"
},
{
"path": "",
"name": "app.js"
}
]
}
],
"resources": []
}
Can someone help me
Seems the jsb file it is not sucessfully created, the files of your application should be in "files" in the builds section but it isn't.
Like this:
...
"builds": [
{
"name": "All Classes",
"target": "all-classes.js",
"options": {
"debug": true
},
"files": [{
"path": "app/controller",
"name": "MyController.js"
}, {
... etc
}]
},
...
What version of the sdk are you using?

Resources