Migrate vue chrome extension from manifest 2 to 3 - vue.js

How are you? I'm trying to migrate the version of extension from 2 to 3. For now, I want to get the result of build with version 3 so that I can upload it to the store. This is main reason why I'm migrating the extension.
It would be greatly appreciated if anyone give detailed solutions to be matched with my project? Looking forward to hearing from you.
This is origin manifest file. If you need more detail, I will provide.
{
"manifest_version": 2,
"version": "0.9.9",
"name": "AAAAAA",
"description": "BBBBBB",
"homepage_url": "https://AAA.co",
"permissions": [
"notifications",
"storage",
"activeTab",
"unlimitedStorage"
],
"icons": {
"16": "icons/icon.png",
"48": "icons/icon.png",
"128": "icons/icon.png",
"256": "icons/icon.png",
"512": "icons/icon.png",
"1024": "icons/icon.png"
},
"background": {
"scripts": [
"js/background.js"
],
"persistent": true
},
"content_scripts": [
{
"matches": [
"file://*/*",
"http://*/*",
"https://*/*"
],
"js": [
"js/content-script.js"
],
"run_at": "document_start",
"all_frames": false
}
],
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icons/icon.png",
"48": "icons/icon.png",
"128": "icons/icon.png",
"256": "icons/icon.png",
"512": "icons/icon.png",
"1024": "icons/icon.png"
}
},
"content_security_policy": "script-src 'self' 'unsafe-eval' https://cdn.segment.com 'sha256-ZgDy59Dh4jH9g/vcPYFpoQ1wumB4IdPEOS1BJc08i+Y='; object-src 'self';"
}

Related

VSCODE - How to configure docker compose problem matcher

I've the following workspace configuration
{
"folders": [
{
"path": "."
}
],
"launch": {
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "docker-compose:launch:chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
},
"preLaunchTask": "docker:compose:up",
"postDebugTask": "docker:compose:down"
},
],
},
"tasks": {
"version": "2.0.0",
"tasks": [
{
"label": "npm:install",
"type": "shell",
"command": "npm install",
"linux": {
"command": "if [ -d ${workspaceFolder}/node_modules ]; then npm install fi"
},
"windows": {
"command": "cmd",
"args": ["/C","if not exist ${workspaceFolder}/node_modules npm install"]
},
"options": {"cwd":"${workspaceFolder}"}
},
{
"type": "docker-compose",
"label": "docker:compose:up",
"dependsOn": ["npm:install"],
"isBackground": true,
"dockerCompose": {
"up": {
"detached": true,
"build": true,
"customOptions": "",
"services": [
"site"
]
},
"files": [
"${workspaceFolder}/docker-compose.yaml"
]
}
},
{
"type": "docker-compose",
"label": "docker:compose:down",
"dockerCompose": {
"down": {
"removeVolumes":false
},
"files": [
"${workspaceFolder}/docker-compose.yaml"
]
},
},
]
},
"settings": {
"terminal.integrated.cwd": "${workspaceFolder}"
}
}
The launch("docker-compose:launch:chrome") configuration is not launching the chrome and I think thats happening because it thinks the task is not finished.
As far I know this should be checked using the problemMatcher, for vuejs as an example i can have the following problemMatcher:
"problemMatcher": [{
"base": "$tsc-watch",
"background": {
"activeOnStart": true,
"beginsPattern": "Starting development server",
"endsPattern": "Compiled successfully"
}
}],
How can i achive the same results using docker-compose?
I mean, is there a way to only launch chrome browser when the npm run serve command is finished?

Why does Safari ignore manifest.json matches when Always Allowed

I am trying to make my WebExtension work with Safari.
Why do all content scripts get injected into every page regardless of what I set matches to in manifest.json?
{
"name": "Search Engine Detector",
"version": "1.0.0",
"manifest_version": 2,
"permissions": [ "*://*/*" ],
"content_scripts": [ {
"js": [ "js/Bing.js" ],
"matches": [ "*://*.bing.com/*" ]
}, {
"js": [ "js/DuckDuckGo.js" ],
"matches": [ "*://*.duckduckgo.com/*" ]
}, {
"js": [ "js/Google.js" ],
"matches": [ "*://*.google.com/*" ]
}, {
"js": [ "js/Yahoo.js" ],
"matches": [ "*://*.yahoo.com/*" ]
} ]
}
To clarify, this only happens if I click 'Always Allow on Every Website' on install, or set 'For other websites' to Allow. Everything works fine if the configuration looks like this:

Add Bootstrap Actions while creating EMR cluster from AWS Step Functions

I'm creating EMR cluster from Step Functions using below code,
"spinning_emr_cluster": {
"Type": "Task",
"Resource": "arn:aws:states:::elasticmapreduce:createCluster.sync",
"Parameters": {
"Name": "CombineFiles",
"VisibleToAllUsers": true,
"ReleaseLabel": "emr-5.29.0",
"Applications": [
{
"Name": "Spark"
}
],
"ServiceRole": "EMR_DefaultRole",
"JobFlowRole": "EMR_EC2_DefaultRole",
"LogUri": "s3://awsmssqltos3/emr_logs/",
"Instances": {
"KeepJobFlowAliveWhenNoSteps": true,
"InstanceFleets": [
{
"Name": "Master",
"InstanceFleetType": "MASTER",
"TargetOnDemandCapacity": 1,
"InstanceTypeConfigs": [
{
"InstanceType": "m1.large"
}
]
},
{
"Name": "Slave",
"InstanceFleetType": "CORE",
"TargetOnDemandCapacity": 1,
"InstanceTypeConfigs": [
{
"InstanceType": "m1.large"
}
]
}
]
}
},
"ResultPath": "$.CreateClusterResult",
"Next": "lambda"
I want to add bootstrap actions while creating the cluster from AWS Step Functions. I have tried searching online but could not find any syntax for that.
"BootstrapActions": [
{
"Name": "CustomBootStrapAction",
"ScriptBootstrapAction": {
"Path": "",
"Args": []
}
}
]
Please Add above code inside Parameters Block.

Aurelia: Error loading app-bundle script

I am trying to move the index.html to a subfolder (in this case a folder called "app") but I am unable to make it to work with CLI. Here is my aurelia.json
{
"name": "lv-app",
"type": "project:application",
"bundler": {
"id": "cli",
"displayName": "Aurelia-CLI"
},
"build": {
"targets": [
{
"id": "web",
"displayName": "Web",
"output": "app/scripts"
}
],
"options": {
"minify": "stage & prod",
"sourcemaps": "dev & stage"
},
"bundles": [
{
"name": "app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{css,html}"
]
},
{
"name": "vendor-bundle.js",
"prepend": [
"node_modules/requirejs/require.js"
],
"dependencies": [
// dependencies omitted
]
}
],
"loader": {
"type": "require",
"configTarget": "vendor-bundle.js",
"includeBundleMetadataInConfig": "auto",
"plugins": [
{
"name": "text",
"extensions": [
".html",
".css"
],
"stub": true
}
]
}
},
"platform": {
"id": "web",
"displayName": "Web",
"baseDir": "./app"
},
"transpiler": {
"id": "babel",
"displayName": "Babel",
"fileExtension": ".js",
"options": {
"plugins": [
"transform-es2015-modules-amd"
]
},
"source": "src/**/*.js"
},
"markupProcessor": {
"id": "none",
"displayName": "None",
"fileExtension": ".html",
"source": "src/**/*.html"
},
"cssProcessor": {
"id": "postcss",
"displayName": "PostCSS",
"fileExtension": ".css",
"source": "src/**/*.css"
},
"paths": {
"root": "src",
"resources": "resources",
"elements": "resources/elements",
"attributes": "resources/attributes",
"valueConverters": "resources/value-converters",
"bindingBehaviors": "resources/binding-behaviors"
}
}
Al first I was having this error:
ERROR [Bundle] Error: Unable to update vendor-bundle path to
app/scripts/vendor-bundle.js, could not find existing reference to
replace
EDIT
But I had configured the baseDir incorrectly.
After changing "baseDir": "app/" for "baseDir": ". /app" I'm getting a different error. When I load the web in localhost the app-bundle.js doesn't load apparently because it's pointing to the wrong route as can be seen in the next picture
As you can see in the next picture the vendor-bundle.js is loading from localhost:9000/scripts no localhost:9000/app/scripts/

Angular 5 Service Worker not working

I try to add service worker to my project after updating to angular 5 and have some problems. I add imports to app.module.ts:
import {ServiceWorkerModule} from '#angular/service-worker';
import {environment} from '../environments/environment';
...
environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') : [],
execute $ ng set apps.0.serviceWorker=true to allow service workers in project
generate config:
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/index.html"
],
"versionedFiles": [
"/*.bundle.css",
"/*.bundle.js",
"/*.chunk.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}
],
"dataGroups": [
{
"name": "api-performance",
"urls": [
"/",
"/main",
"/login",
"/select-content"
],
"cacheConfig": {
"strategy": "performance",
"maxSize": 100,
"maxAge": "3d"
}
}
]
}
And manifest:
{
"name": "App",
"short_name": "App",
"start_url": "/login",
"theme_color": "#00a2e8",
"background_color": "#00a2e8",
"display": "standalone",
"icons": [
{
"src": "assets\/icons\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "assets\/icons\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "assets\/icons\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "assets\/icons\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "assets\/icons\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "assets\/icons\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
Then build it in production:
ng build --prod --aot=false --build-optimizer=false
Http-server run in SSL mode, but lsit of service workers in chrome dev-tools is clear. What's wrong? May be this flags broke it --aot=false --build-optimizer=false?
Seems to be a problem in registering service worker in module where also importing AngularFire2. I found solution how to register SW in main.ts, that's work:
platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
if ('serviceWorker' in navigator && environment.production) {
navigator.serviceWorker.register('ngsw-worker.js');
}
}).catch(err => console.log(err));