I have a MV2 extension with chrome.webRequest that works perfectly but fail on MV3 declarativeNetRequest getting around iframes.
The extension is like a multi-messenger that opens multiple iframes for various sites to merge in a single extension all popular messengers.
So I have a domain "example.com" and there I open multiple iframes, for example open an iframe with Twitter.com or Telegram.org.
Since twitter.com or telegram.org set the X-Frame-Options to DENY those iframes don't show anything.
With MV2 we could run chrome.webRequest and remove those headers:
chrome.webRequest.onHeadersReceived.addListener(
function (details)
{
if (details.tabId && (details.tabId === tabId || details.tabId === -1 || tabMultiId.includes(details.tabId))) {
var b = details.responseHeaders.filter((details) => !['x-frame-options', 'content-security-policy', 'x-content-security-policy', 'strict-transport-security', 'frame-ancestors'].includes(details.name.toLowerCase()));
b.forEach(function(e){
"set-cookie" === e.name && -1 !== e.value.indexOf("Secure") && (-1 !== e.value.indexOf("SameSite=Strict") ?
(e.value = e.value.replace(/SameSite=Strict/g, "SameSite=None"))
: -1 !== e.value.indexOf("SameSite=Lax")
? (e.value = e.value.replace(/SameSite=Lax/g, "SameSite=None"))
: (e.value = e.value.replace(/; Secure/g, "; SameSite=None; Secure")));
});
return {
responseHeaders: b
}
}
},
{
urls: [ "<all_urls>" ],
tabId: tabId
},
["blocking", "responseHeaders", "extraHeaders"]
);
I have tried to do exactly the same with MV3 but keep failing.
My 2 attemps:
async function NetRequest() {
var blockUrls = ["*://*.twitter.com/*","*://*.telegram.org/*"];
var tabId = await getObjectFromLocalStorage('tabId');
var tabMultiId = [];
tabMultiId = JSON.parse(await getObjectFromLocalStorage('tabMultiId'));
tabMultiId.push(tabId);
blockUrls.forEach((domain, index) => {
let id = index + 1;
chrome.declarativeNetRequest.updateSessionRules({
addRules:[
{
"id": id,
"priority": 1,
"action": { "type": "modifyHeaders",
"responseHeaders": [
{ "header": "X-Frame-Options", "operation": "remove" },
{ "header": "Frame-Options", "operation": "remove" },
{ "header": "content-security-policy", "operation": "remove" },
{ "header": "content-security-policy-report-only", "operation": "remove" },
{ "header": "x-content-security-policy", "operation": "remove" },
{ "header": "strict-transport-security", "operation": "remove" },
{ "header": "frame-ancestors", "operation": "remove" },
{ "header": "set-cookie", "operation": "set", "value": "SameSite=None; Secure" }
]
},
"condition": {"urlFilter": domain, "resourceTypes": ["image","media","main_frame","sub_frame","stylesheet","script","font","xmlhttprequest","ping","websocket","other"],
"tabIds" : tabMultiId }
}
],
removeRuleIds: [id]
});
});
}
async function launchWindow(newURL, windowDimensions, urlWindow, isIncognitoWindow, windowType) {
chrome.windows.create({ url: newURL, type: windowType, incognito: isIncognitoWindow, width: windowDimensions.width, height: windowDimensions.height, left: windowDimensions.left, top: windowDimensions.top },
async function (chromeWindow) {
if (urlWindow != "install" || urlWindow != "update") {
chrome.storage.local.set({ 'extensionWindowId': chromeWindow.id }, function () { });
chrome.storage.local.set({ 'tabId': chromeWindow.tabs[0].id }, function () { });
NetRequest();
}
});
}
Also tried:
const iframeHosts = [
'twitter.com', 'telegram.org'
];
const RULE = {
id: 1,
condition: {
initiatorDomains: ['example.com'],
requestDomains: iframeHosts,
resourceTypes: ['sub_frame', 'main_frame'],
},
action: {
type: 'modifyHeaders',
responseHeaders: [
{header: 'X-Frame-Options', operation: 'remove'},
{header: 'Frame-Options', operation: 'remove'},
],
},
};
chrome.declarativeNetRequest.updateDynamicRules({
removeRuleIds: [RULE.id],
addRules: [RULE],
});
Permissions:
"permissions": [
"system.display",
"scripting",
"activeTab",
"notifications",
"contextMenus",
"unlimitedStorage",
"storage",
"declarativeNetRequestWithHostAccess",
"webNavigation",
"alarms"
],
"host_permissions": [
"<all_urls>"
],
Any of this attempts worked.
Greetings and thank you very much for anyone that try to help.
You need to unregister service worker for the site and clear its cache using chrome.browsingData API.
Syntax for urlFilter is different, so your "*://*.twitter.com/*" is incorrect and should be "||twitter.com/", however a better solution is to use requestDomains because it allows specifying multiple sites in just one rule.
// manifest.json
"permissions": ["browsingData", "declarativeNetRequest"],
"host_permissions": ["*://*.twitter.com/", "*://*.telegram.org/"],
// extension script
async function configureNetRequest(tabId) {
const domains = [
'twitter.com',
'telegram.org',
];
const headers = [
'X-Frame-Options',
'Frame-Options',
];
await chrome.declarativeNetRequest.updateSessionRules({
removeRuleIds: [1],
addRules: [{
id: 1,
action: {
type: 'modifyHeaders',
responseHeaders: headers.map(h => ({ header: h, operation: 'remove'})),
},
condition: {
requestDomains: domains,
resourceTypes: ['sub_frame'],
tabIds: [tabId],
},
}],
});
await chrome.browsingData.remove({
origins: domains.map(d => `https://${d}`),
}, {
cacheStorage: true,
serviceWorkers: true,
});
}
// Usage
chrome.windows.create({ url: 'about:blank' }, async w => {
await configureNetRequest(w.tabs[0].id);
await chrome.tabs.update(w.tabs[0].id, { url: 'https://some.real.url/' });
});
Related
I'm making an extension that will be able to modify request responses. I did some research, found this answer https://stackoverflow.com/a/51594799/16661157 and implemented it into my extension.
When debugging this script, it detects the majority of requests but not all, unfortunately the most important for me are not. So my question is: what could be causing this?
manifest.json
{
"manifest_version": 3,
"permissions": [
"tabs"
],
"web_accessible_resources": [{
"resources": ["script.js"],
"matches": [ "<all_urls>" ]
}],
"action": {
"default_popup": "index.html"
},
"content_scripts": [
{
"matches": [ "<all_urls>" ],
"js": ["jquery-3.6.0.min.js", "contentscript.js"],
"run_at": "document_start"
}
]
}
contentscript.js
var s = document.createElement('script');
s.src = chrome.runtime.getURL('script.js');
s.onload = function() {
this.remove();
};
(document.head || document.documentElement).appendChild(s);
script.js
var _open = XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function (method, URL) {
var _onreadystatechange = this.onreadystatechange,
_this = this;
_this.onreadystatechange = function () {
// catch only completed 'api/search/universal' requests
try {
console.log('Caught! :)', method, URL/*, _this.responseText*/);
} catch (e) {}
if (_this.readyState === 4 && _this.status === 200 && ~URL.indexOf('api/search/universal')) {
try {
//////////////////////////////////////
// THIS IS ACTIONS FOR YOUR REQUEST //
// EXAMPLE: //
//////////////////////////////////////
var data = JSON.parse(_this.responseText); // {"fields": ["a","b"]}
if (data.fields) {
data.fields.push('c','d');
}
// rewrite responseText
Object.defineProperty(_this, 'responseText', {value: JSON.stringify(data)});
/////////////// END //////////////////
} catch (e) {}
}
// call original callback
if (_onreadystatechange) _onreadystatechange.apply(this, arguments);
};
// detect any onreadystatechange changing
Object.defineProperty(this, "onreadystatechange", {
get: function () {
return _onreadystatechange;
},
set: function (value) {
_onreadystatechange = value;
}
});
return _open.apply(_this, arguments);
};
I am not able to figure out a way to change the material of a polygon entity from a GeoJsonDataSource. I would like to apply an image.
Here is an example using a color because I don't know how to embed an image on the online sandcastle:
var viewer = new Cesium.Viewer("cesiumContainer");
const poly = {
"type": "FeatureCollection",
"name": "MyPolygon",
"crs": {"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}},
"features": [
{"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[[ 10.746500009923748, 48.314700009648320, 500 ],
[ 10.747500009924019, 48.315700009648104, 500 ],
[ 10.747038310965864, 48.315905422444722, 550 ],
[ 10.746038315853207, 48.314905418639555, 550 ],
[ 10.746500009923748, 48.314700009648320, 500 ]]
]}}]};
const Promise0 = async () => {
try {
const dataSource = await Cesium.GeoJsonDataSource.load(poly, {
stroke: Cesium.Color.BLUE,
strokeWidth: 3
});
const Promise1 = async () => {
try {
const polygonalFrame = await viewer.dataSources.add(dataSource);
viewer.zoomTo(polygonalFrame);
const entities = polygonalFrame.entities.values;
for (var i = 0; i < entities.length; i++) {
const entity = entities[i];
entity.polygon.material = new Cesium.Material({
fabric : {
type : 'Color',
uniforms : {
color : new Cesium.Color(1.0, 0.0, 0.4, 0.5)
}
}
});
}
}
catch (err) {
console.log("Error: ", err);
}
};
Promise1();
}
catch (e) {
console.log("Error:", e);
}
};
Promise0();
The polygon remains yellow, which is the default color I think.
For the image material, I use this definition locally:
new Cesium.Material({
fabric : {
type : 'Image',
uniforms : {
image : './image.png'
}
}
});
I fixed it using this way of defining the PolygonGraphics' material in my entity:
new Cesium.ImageMaterialProperty({
image: './image.png',
alpha: 0.5
});
But I noticed that alpha blending doesn't work when I try to apply it on my whole image...
I have the following issue with Jest:
I have this reducer:
[REMOVE_FILTER]: (state: FiltersState, action: Action<string>): FiltersState => {
const { [action.payload!]: deleted, ...activeFilters } = state.activeFilters;
return { ...state, activeFilters, createFilterSelection: undefined, filterCreateOpen: false };
}
When I am trying to test it, it says that I do not have coverage for
...activeFilters } = state.activeFilters;
Here is my test:
test(REMOVE_FILTER, () => {
const action: IAction<string> = {
type: REMOVE_FILTER,
payload: "subprovider"
};
expect(
testReducer({ reducer, state, action })
).toEqual({
...state,
activeFilters: { name: null, branded: null },
createFilterSelection: undefined,
filterCreateOpen: false
});
});
Can someone suggest what I am doing wrong?
I am using:
Jest 23.6.0
Typescript 3.4.0
Redux 4.0.0
React-Redux: 6.0.0
Redux Actions: 2.6.1
Thank you!
P.S: Here is the Jest config:
{
"coverageThreshold": {
"global": {
"branches": 100,
"functions": 100,
"lines": 100,
"statements": 100
}
},
"globals": {
"window": true,
"document": true
},
"transform": {
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__test__/.*)\\.test\\.(ts|tsx)$",
"notify": true,
"collectCoverageFrom": [
"**/*.{ts,tsx}"
],
"coveragePathIgnorePatterns": [
"(/__e2e__/.*)",
"(/__specs__/.*)",
"(/__test__/.*)",
"(/interfaces/.*)",
"(index.ts)",
"(src/server/app.ts)",
"(src/server/config.ts)",
"(/mock/.*)",
"(data/mock.ts)",
"(automapperConfiguration.ts)",
"(src/app/store/store.ts)",
"(src/app/containers/brand-configuration/.*)"
],
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"json"
],
"setupTestFrameworkScriptFile": "<rootDir>/jestSetup.js",
"testURL": "http://localhost/"
}
The above TS code gets transpilled to:
[REMOVE_FILTER]: (state, action) => {
const _a = state.activeFilters, _b = action.payload, deleted = _a[_b], activeFilters = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
return Object.assign({}, state, { activeFilters, createFilterSelection: undefined, filterCreateOpen: false });
}
I seem to be having an issue getting my ng-grid directive to populate from a returned REST api json obj.
I have verfied that a valid json obj is returned and i have retrieved a nested obj of the data I need. It seems that it is not making it into the gridOptions function. Where myData is the correct valid json.
Any help will be greatly appreciated. I am pulling my hair out at this point.
Here is my service:
grid-service.js
'use strict';
app.factory('GridService', ['$http', '$q', function($http, $q) {
var apiUrl = "http://xx.xx.xx.xx/coName/public/index.php/";
// configure the send request
function sendRequest(config){
var deferred = $q.defer();
config.then(function(response){
deferred.resolve(response);
}, function(error){
deferred.reject(error);
});
return deferred.promise;
}
// retrieve all
function getRoles() {
var request = $http({
method: 'GET',
url: apiUrl + 'roles'
});
return sendRequest(request);
}
return {
getRoles: getRoles
};
}]);
I inject it into my ctrl here, and my init function and gridOption functions:
app.controller('ModuleCtrl', [ '$scope', '$http', '$modal', '$filter', 'GridService', function($scope, $http, $modal, $filter, gridService) {
var initializeGrid = function(){
getRoles();
};
var getRoles = function(){
gridService.getRoles().then(function(myRoles){
var myRolesData = myRoles.data._embedded.roles;
$scope.myData = myRoles.data._embedded.roles;
console.log($scope.myData);
});
};
$scope.gridOptions = {
data: 'myData',
enableRowSelection: true,
enableCellEditOnFocus: true,
showSelectionCheckbox: true,
selectedItems: $scope.selectedRows,
columnDefs: [{
field: 'ID',
displayName: 'Id',
enableCellEdit: false
}, {
field: 'APP_ID',
displayName: 'Module ID',
enableCellEdit: false
}, {
field: 'RLDESC',
displayName: 'Role Description',
enableCellEdit: true
}, {
field: 'APDESC',
displayName: 'Module Description',
enableCellEdit: true
}, {
field: 'ZEND_DB_ROWNUM',
displayName: 'Record number',
enableCellEdit: false
}]
};
// fire it up
initializeGrid();
}
My complete json:
{
"_links": {
"self": {
"href": "http://xx.xx.xx.xx/coName/public/index.php/roles?page=1"
},
"describedBy": {
"href": "Some Fun Stuff"
},
"first": {
"href": "http://xx.xx.xx.xx/coName/public/index.php/roles"
},
"last": {
"href": "http://xx.xx.xx.xx/coName/public/index.php/roles?page=1"
}
},
"_embedded": {
"roles": [
{
"ID": 1,
"APP_ID": 1,
"RLDESC": "Admin",
"APDESC": "authLive",
"ZEND_DB_ROWNUM": "1"
},
{
"ID": 2,
"APP_ID": 1,
"RLDESC": "User",
"APDESC": "authLive",
"ZEND_DB_ROWNUM": "2"
},
{
"ID": 4,
"APP_ID": 1,
"RLDESC": "SuperUser",
"APDESC": "authLive",
"ZEND_DB_ROWNUM": "3"
}
]
},
"page_count": 1,
"page_size": 25,
"total_items": 3
}
Remove the following line from the gridOptions
data: 'myData'
Then in getRoles() use
$scope.gridOptions.data = myRolesData;
instead of
$scope.myData = myRoles.data._embedded.roles;
(Maybe you need $scope.myData for some other reason than the grid, but if not I think the above is all you need. I have not tested this live, but it should work.)
I have a chrome extension. I need to analyse from the HTML source of the current page. I found here all kinds of solutions with background pages and content scripts but none helped me. here is what I have so far:
manifest.json
{
"name": "Extension",
"version": "1.0",
"description": "Extension",
"browser_action": {
"default_icon": "bmarkred.ico",
"popup": "Test.html"
},
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["content.js"]
}
],
"background": {
"page": "backgroundPage.html"
},
"permissions": [
"cookies",
"tabs",
"http://*/*",
"https://*/*"
]
}
background.html
<html>
<head>
<script type="text/javascript">
try {
chrome.tabs.getSelected(null, function (tab) {
chrome.tabs.sendRequest(tab.id, {action: "getSource"}, function(source) {
alert(source);
});
});
}
catch (ex) {
alert(ex);
}
</script>
</head>
</html>
content.js
chrome.extension.onRequest.addListener(function(request, sender, callback) {
if (request.action == "getSource") {
callback(document.getElementsByTagName('html')[0].innerHTML);
}
});
The alert always alerts undefined. even if i change in the content.js file the callback function to:
callback('hello');
still the same result. What am I doing wrong? maybe I'm going at this the wrong way. What I really need is this: When the user opens the extension popup (and only then), I need HTML of the current page so I can analyse it.
Inject a script into the page you want to get the source from and message it back to the popup....
manifest.json
{
"name": "Get pages source",
"version": "1.1",
"manifest_version": 3,
"description": "Get active tabs or element on that pages source from a popup",
"action": {
"default_title": "Get pages source",
"default_popup": "popup.html"
},
"permissions": [
"scripting",
"activeTab"
]
}
popup.html
function onWindowLoad() {
var message = document.querySelector('#message');
chrome.tabs.query({ active: true, currentWindow: true }).then(function (tabs) {
var activeTab = tabs[0];
var activeTabId = activeTab.id;
return chrome.scripting.executeScript({
target: { tabId: activeTabId },
// injectImmediately: true, // uncomment this to make it execute straight away, other wise it will wait for document_idle
func: DOMtoString,
// args: ['body'] // you can use this to target what element to get the html for
});
}).then(function (results) {
message.innerText = results[0].result;
}).catch(function (error) {
message.innerText = 'There was an error injecting script : \n' + error.message;
});
}
window.onload = onWindowLoad;
function DOMtoString(selector) {
if (selector) {
selector = document.querySelector(selector);
if (!selector) return "ERROR: querySelector failed to find node"
} else {
selector = document.documentElement;
}
return selector.outerHTML;
}
Here is my solution:
chrome.runtime.onMessage.addListener(function(request, sender) {
if (request.action == "getSource") {
this.pageSource = request.source;
var title = this.pageSource.match(/<title[^>]*>([^<]+)<\/title>/)[1];
alert(title)
}
});
chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
chrome.tabs.executeScript(
tabs[0].id,
{ code: 'var s = document.documentElement.outerHTML; chrome.runtime.sendMessage({action: "getSource", source: s});' }
);
});