Add in-server inspect link with broskins server

[arthurfiorette]

Add an inspect side button for an in-game inspect where !gen code from the broskins server is generated and you are connected to their server. I was thinking about doing an extension of my own for that, but I think here would be better.

Example while viewing a steam inventory:

When clicking at the inspect on server button, should be open steam://connect/51.75.73.121:27015 to automatically connect you to the server and copy the code to clipboard (showing a popup telling that).

I'm also a programmer and i can create a PR to do that, if you mind to show where i could begin.

How to do

While i was testing if it can be possible, i reversed engineered this page and found how to generate the commands.

https://gist.github.com/ArthurFiorette/146c9b079b5586df2d4ed57ed81e1d51.

Simple explanation

To get all the necessary information, we need to connect to their socket v2 api.

<!-- The version that they use -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"></script>

 const socket = io('https://broskins.com', {
    path: '/app2socket'
  });

After connected, we can emit a `lookup* event with the inspect link.

socket.emit('lookup', inspectLink);

Then is just wait for the response:

socket.once('floatmessage', ({ iteminfo }) => {
  // code
});

And you can use this code that i created to generate the gen command

const inspectCommand = (itemInfo) => {
  // Glove code starts with different name
  const isGloves =
    itemInfo.full_item_name.includes('Gloves') ||
    itemInfo.full_item_name.includes('Wrap');

  // Parse the sticker array to a string like: `firstStickerId firstStickerWear secondStickerId secondStickerWear ...`
  const stickerInfo = itemInfo.stickers
    .map(({ stickerId, wear }) => ({ stickerId, wear }))
    .reduce(
      (str, sticker) =>
        str + `${sticker.stickerId} ${sticker.wear ? parseFloat(sticker.wear) : 0} `,
      ' '
    );

  // Join all into a string
  return (
    `!${isGloves ? 'gengl' : 'gen'} ${itemInfo.defindex} ${itemInfo.paintindex} ${itemInfo.paintseed} ${itemInfo.floatvalue}${stickerInfo}`
  );
};

And joining everything you'll end with something like that:

const inspectCommand = (itemInfo) => {
  // Glove code starts with different name
  const isGloves =
    itemInfo.full_item_name.includes('Gloves') ||
    itemInfo.full_item_name.includes('Wrap');

  // Parse the sticker array to a string like: `firstStickerId firstStickerWear secondStickerId secondStickerWear...`
  const stickerInfo = itemInfo.stickers
    .map(({ stickerId, wear }) => ({ stickerId, wear }))
    .reduce(
      (str, sticker) =>
        str + `${sticker.stickerId} ${sticker.wear ? parseFloat(sticker.wear) : 0} `,
      ' '
    );

  // Join all into a string
  return (
    `!${isGloves ? 'gengl' : 'gen'} ${itemInfo.defindex} ${itemInfo.paintindex} ${itemInfo.paintseed} ${itemInfo.floatvalue}${stickerInfo}`
  );
};

const socket = io('https://broskins.com', {
    path: '/app2socket'
});

socket.on('connect', () => {
  const inspectLink = 'steam://...';
  socket.emit('lookup', inspectLink);
});

// Use socket.on to not listen only once
socket.on('floatmessage', ({ iteminfo }) => {
  window.alert(`Command is: ${inspectCommand(iteminfo)}`);
});

[gergelyszabo94]

Hi, the idea is great and I am sure lots of people would use it. However I think we should ask broskins if we can use it, for ethical and technical reasons. I think it's only fair to them since they provide this service which they developed and host, they should be asked whether they can/want to handle the additional load. From a technical perspective they could just restrict the usage if they wanted to with CORS, it would be unfortunate to spend time implementing it for them shut us out. Some technical insights that might be useful if we add it or you make an extension of your own:

• Remote code is not really allowed on the extension stores anymore so socket.io would have to be added as a dependency instead
• broskins would have to be added to the extension manifest so it can be reached, most likely as an optional permission since adding a new permission is quite distruptive (the extension gets disabled for every user until they allow the new permission).

Do you want me to try to contact someone at broskins?

[arthurfiorette]

The socket.io 2.0 version can also be installed via NPM, so it would be shipped in the extension bundle. As for broskins, I support this idea and probably many others. I think it's worth trying to contact them first.

I don't know the requirements of an extension and its manifest.json, but as I understand this would be added as an optional feature that is disabled and can only be enabled after the user goes to the panel and accepts the required permission?

[gergelyszabo94]

I contacted them through their website content form, I will post their response here. As an optional permission the user would have to go to the extension settings, enable the feature (this is when the permission grant popip would appear). If the accept the additional permission then the extension would have access to the broskins domain and to this feature.

[arthurfiorette]

Got any response?

[gergelyszabo94]

Nope, unfortunately no.

[arthurfiorette]

How about just adding a button to generate the code, but without a link to get into your servers, I'd love to see this feature ASAP.

[gergelyszabo94]

Can you elaborate on what you are proposing here? I just tweeted about this, hopefuly someone can get us into contact with them: https://twitter.com/gergelyszabo94/status/1458425806053588997

[arthurfiorette]

I'm a little busy rn, but the first few paragraphs explain what I'm proposing.

[gergelyszabo94]

This is the reply that I got: "Hey, yes of course you can use my server-side generation (!gen), but can you take the inspesct api from https://api.csgofloat.com (https://github.com/csgofloat/inspect) ?"

[gergelyszabo94]

We already use the csgofloat api, so that does not sound like an issue but I will get into the details tomorrow.

[arthurfiorette]

Great! i thought their api data was internal, not a proxy for csgofloat api.

[gergelyszabo94]

@ArthurFiorette I started working on this, hopefully I will have something concrete to show for by tomorrow.

[arthurfiorette]

If you need help, I'm here.

[gergelyszabo94]

@arthurfiorette the first version for inventories is available now. I had to change your generation logic a bit because it mishandled stickered items where for example a single sticker was on the weapon and the sticker was not on the first slot.

Give it a try and let me know what you think!

[arthurfiorette]

@arthurfiorette the first version for inventories is available now. I had to change your generation logic a bit because it mishandled stickered items where for example a single sticker was on the weapon and the sticker was not on the first slot.

Give it a try and let me know what you think!

Right! have you published any kind of development release or will i have to compile it myself?

[gergelyszabo94]

@arthurfiorette I don't really do dev builds, you can try it following these instructions: https://github.com/gergelyszabo94/csgo-trader-extension/tree/master/extension#development

[arthurfiorette]

Sorry for the delay, I had some "free" time just now. After almost an hour trying to compile node-sass on my freshly formatted machine, I managed to build and test it.

It gets stuck in this:

Apparently no console errors and no network requests

[gergelyszabo94]

@arthurfiorette What browser do you use? Float values load otherwise?

[arthurfiorette]

I'm using brave, -> chromium.

Float shows that even if the skin is FT.

[gergelyszabo94]

I think the issue is that CSGOFloat checks the origin and if it is not whitelisted it rejects the requests. If you use Chrome then you should get the same id as the one on the webstore and the requests go through.

I am finishing up the same feature in trade offers atm btw.

[arthurfiorette]

Tried on MS Edge, same thing. For some reason, I could have built the project the wrong way??

Build output

```sh ❯ yarn build yarn run v1.22.17 $ webpack --progress --colors --env.mode='production' Hash: 34cff9fbadb2763679f5 Version: webpack 4.43.0 Time: 18402ms Built at: 11/17/2021 2:35:44 PM Asset Size Chunks Chunk Names 0.bundle.js 47.6 KiB 0 [emitted] 1.bundle.js 15.8 KiB 1 [emitted] 2.bundle.js 39.9 KiB 2 [emitted] 25.bundle.js 243 KiB 25 [emitted] 25.css 20.8 KiB 25 [emitted] 26.bundle.js 391 KiB 26, 2 [emitted] [big] 26.css 169 bytes 26, 2 [emitted] 27.bundle.js 279 KiB 27 [emitted] [big] 28.bundle.js 13 KiB 28 [emitted] 29.bundle.js 6.36 KiB 29 [emitted] 3.bundle.js 17.6 KiB 3 [emitted] 30.bundle.js 11.7 KiB 30 [emitted] _locales/bg/messages.json 2.23 KiB [emitted] _locales/da/messages.json 3.05 KiB [emitted] _locales/en/messages.json 3.1 KiB [emitted] _locales/hu/messages.json 3.05 KiB [emitted] css/generalCSTStyle.css 12.9 KiB [emitted] cstlogo48.png 1.99 KiB [emitted] images/cstlogo128.png 5.26 KiB [emitted] images/cstlogo16.png 615 bytes [emitted] images/cstlogo32.png 1.37 KiB [emitted] images/cstlogo48.png 1.99 KiB [emitted] images/external_logos/bitskins.png 44.8 KiB [emitted] images/external_logos/csgofloat.png 18.4 KiB [emitted] images/external_logos/csmoney.png 21.2 KiB [emitted] images/external_logos/dmarket.png 5.4 KiB [emitted] images/external_logos/itemherald.png 5.93 KiB [emitted] images/external_logos/skinbaron.png 11.3 KiB [emitted] images/external_logos/skinport.png 62.7 KiB [emitted] images/external_logos/swapgg.png 7.86 KiB [emitted] images/external_logos/waxpeer.png 19.8 KiB [emitted] images/growth.png 3.78 KiB [emitted] images/hand-pointer-solid.svg 716 bytes [emitted] images/list-solid.svg 786 bytes [emitted] images/paperclip.png 11.7 KiB [emitted] images/plus.png 3.74 KiB [emitted] images/reply.png 1.11 KiB [emitted] images/scammerbackground.jpg 72.8 KiB [emitted] images/spinner.gif 16.5 KiB [emitted] images/table-solid.svg 428 bytes [emitted] index.bundle.js 188 KiB 4 [emitted] index index.css 170 KiB 4 [emitted] index index.html 422 bytes [emitted] js/backgroundScripts/background.bundle.js 356 KiB 5, 1, 2 [emitted] [big] js/backgroundScripts/background js/backgroundScripts/messaging.bundle.js 342 KiB 6, 1, 2 [emitted] [big] js/backgroundScripts/messaging js/contentScripts/loungeBump.bundle.js 314 KiB 7, 1, 2 [emitted] [big] js/contentScripts/loungeBump js/contentScripts/steam/apiKey.bundle.js 316 KiB 8, 1, 2 [emitted] [big] js/contentScripts/steam/apiKey js/contentScripts/steam/discussions.bundle.js 323 KiB 9, 1, 2 [emitted] [big] js/contentScripts/steam/discussions js/contentScripts/steam/friends.bundle.js 315 KiB 10, 1, 2 [emitted] [big] js/contentScripts/steam/friends js/contentScripts/steam/group.bundle.js 321 KiB 11, 1, 2 [emitted] [big] js/contentScripts/steam/group js/contentScripts/steam/inventory.bundle.js 397 KiB 12, 1, 2 [emitted] [big] js/contentScripts/steam/inventory js/contentScripts/steam/market.bundle.js 354 KiB 13, 1, 2 [emitted] [big] js/contentScripts/steam/market js/contentScripts/steam/marketListing.bundle.js 355 KiB 14, 1, 2 [emitted] [big] js/contentScripts/steam/marketListing js/contentScripts/steam/marketSearch.bundle.js 314 KiB 15, 1, 2 [emitted] [big] js/contentScripts/steam/marketSearch js/contentScripts/steam/openIDLogin.bundle.js 314 KiB 16, 1, 2 [emitted] [big] js/contentScripts/steam/openIDLogin js/contentScripts/steam/profile.bundle.js 349 KiB 17, 1, 2 [emitted] [big] js/contentScripts/steam/profile js/contentScripts/steam/sharedFile.bundle.js 321 KiB 18, 1, 2 [emitted] [big] js/contentScripts/steam/sharedFile js/contentScripts/steam/tradeHistory.bundle.js 315 KiB 19, 1, 2 [emitted] [big] js/contentScripts/steam/tradeHistory js/contentScripts/steam/tradeOffer.bundle.js 385 KiB 20, 1, 2 [emitted] [big] js/contentScripts/steam/tradeOffer js/contentScripts/steam/tradeOffers.bundle.js 371 KiB 21, 1, 2 [emitted] [big] js/contentScripts/steam/tradeOffers js/contentScripts/steam/webChat.bundle.js 315 KiB 22, 1, 2 [emitted] [big] js/contentScripts/steam/webChat js/contentScripts/tradersAutoLogin.bundle.js 1.18 KiB 23 [emitted] js/contentScripts/tradersAutoLogin js/contentScripts/tradersBump.bundle.js 314 KiB 24, 1, 2 [emitted] [big] js/contentScripts/tradersBump manifest.json 7.11 KiB [emitted] manifest_ff.json 6.39 KiB [emitted] sounds/notification/done-for-you.mp3 50.6 KiB [emitted] sounds/notification/juntos.mp3 51 KiB [emitted] sounds/notification/piece-of-cake.mp3 102 KiB [emitted] sounds/notification/pristine.mp3 89.8 KiB [emitted] sounds/notification/swiftly.mp3 60.8 KiB [emitted] sounds/notification/when.mp3 29.4 KiB [emitted] spinner.gif 16.5 KiB [emitted] Entrypoint index [big] = index.css index.bundle.js Entrypoint js/backgroundScripts/background [big] = js/backgroundScripts/background.bundle.js Entrypoint js/backgroundScripts/messaging [big] = js/backgroundScripts/messaging.bundle.js Entrypoint js/contentScripts/loungeBump [big] = js/contentScripts/loungeBump.bundle.js Entrypoint js/contentScripts/tradersBump [big] = js/contentScripts/tradersBump.bundle.js Entrypoint js/contentScripts/tradersAutoLogin = js/contentScripts/tradersAutoLogin.bundle.js Entrypoint js/contentScripts/steam/apiKey [big] = js/contentScripts/steam/apiKey.bundle.js Entrypoint js/contentScripts/steam/friends [big] = js/contentScripts/steam/friends.bundle.js Entrypoint js/contentScripts/steam/group [big] = js/contentScripts/steam/group.bundle.js Entrypoint js/contentScripts/steam/openIDLogin [big] = js/contentScripts/steam/openIDLogin.bundle.js Entrypoint js/contentScripts/steam/sharedFile [big] = js/contentScripts/steam/sharedFile.bundle.js Entrypoint js/contentScripts/steam/webChat [big] = js/contentScripts/steam/webChat.bundle.js Entrypoint js/contentScripts/steam/inventory [big] = js/contentScripts/steam/inventory.bundle.js Entrypoint js/contentScripts/steam/marketListing [big] = js/contentScripts/steam/marketListing.bundle.js Entrypoint js/contentScripts/steam/market [big] = js/contentScripts/steam/market.bundle.js Entrypoint js/contentScripts/steam/tradeOffer [big] = js/contentScripts/steam/tradeOffer.bundle.js Entrypoint js/contentScripts/steam/tradeOffers [big] = js/contentScripts/steam/tradeOffers.bundle.js Entrypoint js/contentScripts/steam/profile [big] = js/contentScripts/steam/profile.bundle.js Entrypoint js/contentScripts/steam/discussions [big] = js/contentScripts/steam/discussions.bundle.js Entrypoint js/contentScripts/steam/tradeHistory [big] = js/contentScripts/steam/tradeHistory.bundle.js Entrypoint js/contentScripts/steam/marketSearch [big] = js/contentScripts/steam/marketSearch.bundle.js [93] ./src/backgroundScripts/background.js 13.5 KiB {5} [built] [94] ./src/backgroundScripts/messaging.js 7.61 KiB {6} [built] [95] ./src/contentScripts/loungeBump.js 572 bytes {7} [built] [96] ./src/contentScripts/tradersBump.js 884 bytes {24} [built] [97] ./src/contentScripts/tradersAutoLogin.js 431 bytes {23} [built] [98] ./src/contentScripts/steam/apiKey.js 2.48 KiB {8} [built] [99] ./src/contentScripts/steam/friends.js 1.05 KiB {10} [built] [100] ./src/contentScripts/steam/group.js 978 bytes {11} [built] [101] ./src/contentScripts/steam/openIDLogin.js 292 bytes {16} [built] [102] ./src/contentScripts/steam/sharedFile.js 552 bytes {18} [built] [103] ./src/contentScripts/steam/webChat.js 3.3 KiB {22} [built] [104] ./src/contentScripts/steam/inventory.js 88.5 KiB {12} [built] [105] ./src/contentScripts/steam/market.js 29 KiB {13} [built] [106] ./src/contentScripts/steam/tradeOffer.js 50.4 KiB {20} [built] [107] ./src/contentScripts/steam/tradeOffers.js 33.2 KiB {21} [built] + 395 hidden modules WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: js/backgroundScripts/background.bundle.js (356 KiB) js/backgroundScripts/messaging.bundle.js (342 KiB) js/contentScripts/loungeBump.bundle.js (314 KiB) js/contentScripts/steam/apiKey.bundle.js (316 KiB) js/contentScripts/steam/discussions.bundle.js (323 KiB) js/contentScripts/steam/friends.bundle.js (315 KiB) js/contentScripts/steam/group.bundle.js (321 KiB) js/contentScripts/steam/inventory.bundle.js (397 KiB) js/contentScripts/steam/market.bundle.js (354 KiB) js/contentScripts/steam/marketListing.bundle.js (355 KiB) js/contentScripts/steam/marketSearch.bundle.js (314 KiB) js/contentScripts/steam/openIDLogin.bundle.js (314 KiB) js/contentScripts/steam/profile.bundle.js (349 KiB) js/contentScripts/steam/sharedFile.bundle.js (321 KiB) js/contentScripts/steam/tradeHistory.bundle.js (315 KiB) js/contentScripts/steam/tradeOffer.bundle.js (385 KiB) js/contentScripts/steam/tradeOffers.bundle.js (371 KiB) js/contentScripts/steam/webChat.bundle.js (315 KiB) js/contentScripts/tradersBump.bundle.js (314 KiB) 26.bundle.js (391 KiB) 27.bundle.js (279 KiB) WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: index (359 KiB) index.css index.bundle.js js/backgroundScripts/background (356 KiB) js/backgroundScripts/background.bundle.js js/backgroundScripts/messaging (342 KiB) js/backgroundScripts/messaging.bundle.js js/contentScripts/loungeBump (314 KiB) js/contentScripts/loungeBump.bundle.js js/contentScripts/tradersBump (314 KiB) js/contentScripts/tradersBump.bundle.js js/contentScripts/steam/apiKey (316 KiB) js/contentScripts/steam/apiKey.bundle.js js/contentScripts/steam/friends (315 KiB) js/contentScripts/steam/friends.bundle.js js/contentScripts/steam/group (321 KiB) js/contentScripts/steam/group.bundle.js js/contentScripts/steam/openIDLogin (314 KiB) js/contentScripts/steam/openIDLogin.bundle.js js/contentScripts/steam/sharedFile (321 KiB) js/contentScripts/steam/sharedFile.bundle.js js/contentScripts/steam/webChat (315 KiB) js/contentScripts/steam/webChat.bundle.js js/contentScripts/steam/inventory (397 KiB) js/contentScripts/steam/inventory.bundle.js js/contentScripts/steam/marketListing (355 KiB) js/contentScripts/steam/marketListing.bundle.js js/contentScripts/steam/market (354 KiB) js/contentScripts/steam/market.bundle.js js/contentScripts/steam/tradeOffer (385 KiB) js/contentScripts/steam/tradeOffer.bundle.js js/contentScripts/steam/tradeOffers (371 KiB) js/contentScripts/steam/tradeOffers.bundle.js js/contentScripts/steam/profile (349 KiB) js/contentScripts/steam/profile.bundle.js js/contentScripts/steam/discussions (323 KiB) js/contentScripts/steam/discussions.bundle.js js/contentScripts/steam/tradeHistory (315 KiB) js/contentScripts/steam/tradeHistory.bundle.js js/contentScripts/steam/marketSearch (314 KiB) js/contentScripts/steam/marketSearch.bundle.js Child HtmlWebpackCompiler: Asset Size Chunks Chunk Names _locales/bg/messages.json 2.23 KiB [emitted] _locales/da/messages.json 3.05 KiB [emitted] _locales/en/messages.json 3.1 KiB [emitted] _locales/hu/messages.json 3.05 KiB [emitted] css/generalCSTStyle.css 12.9 KiB [emitted] images/cstlogo128.png 5.26 KiB [emitted] images/cstlogo16.png 615 bytes [emitted] images/cstlogo32.png 1.37 KiB [emitted] images/cstlogo48.png 1.99 KiB [emitted] images/external_logos/bitskins.png 44.8 KiB [emitted] images/external_logos/csgofloat.png 18.4 KiB [emitted] images/external_logos/csmoney.png 21.2 KiB [emitted] images/external_logos/dmarket.png 5.4 KiB [emitted] images/external_logos/itemherald.png 5.93 KiB [emitted] images/external_logos/skinbaron.png 11.3 KiB [emitted] images/external_logos/skinport.png 62.7 KiB [emitted] images/external_logos/swapgg.png 7.86 KiB [emitted] images/external_logos/waxpeer.png 19.8 KiB [emitted] images/growth.png 3.78 KiB [emitted] images/hand-pointer-solid.svg 716 bytes [emitted] images/list-solid.svg 786 bytes [emitted] images/paperclip.png 11.7 KiB [emitted] images/plus.png 3.74 KiB [emitted] images/reply.png 1.11 KiB [emitted] images/scammerbackground.jpg 72.8 KiB [emitted] images/spinner.gif 16.5 KiB [emitted] images/table-solid.svg 428 bytes [emitted] manifest.json 7.11 KiB [emitted] manifest_ff.json 6.39 KiB [emitted] sounds/notification/done-for-you.mp3 50.6 KiB [emitted] sounds/notification/juntos.mp3 51 KiB [emitted] sounds/notification/piece-of-cake.mp3 102 KiB [emitted] sounds/notification/pristine.mp3 89.8 KiB [emitted] sounds/notification/swiftly.mp3 60.8 KiB [emitted] sounds/notification/when.mp3 29.4 KiB [emitted] + 1 hidden asset Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0 [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 404 bytes {0} [built] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!node_modules/bootstrap/dist/css/bootstrap.min.css: 35 assets Entrypoint mini-css-extract-plugin = * 2 modules Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!node_modules/react-datepicker/dist/react-datepicker.css: 35 assets Entrypoint mini-css-extract-plugin = * 2 modules Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!src/App.scss: 35 assets Entrypoint mini-css-extract-plugin = * [1] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/App.scss 8.1 KiB {0} [built] [2] ./node_modules/css-loader/dist/cjs.js!./src/assets/styles/external/CSTExtensionPages.css 4.56 KiB {0} [built] + 1 hidden module Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!src/components/Navigation/Navigation.css: 35 assets Entrypoint mini-css-extract-plugin = * 2 modules Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!src/components/Options/Inputs/PricingProvider/PricingProvider.css: 35 assets Entrypoint mini-css-extract-plugin = * 2 modules Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!src/components/Options/Inputs/Refresh/Refresh.css: 35 assets Entrypoint mini-css-extract-plugin = * 2 modules Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/dist/cjs.js!src/components/Options/Row.css: 35 assets Entrypoint mini-css-extract-plugin = * 2 modules Done in 19.13s. ```

[arthurfiorette]

I think the issue is that CSGOFloat checks the origin and if it is not whitelisted it rejects the requests.

There is no requests being made.

[arthurfiorette]

Hmm, with store extensions everything is fine, on the extensions error page I found these:

Access to fetch at 'https://api.csgofloat.com/?url=steam://rungame/730/76561202255233023/+csgo_econ_action_preview%20S76561198850668121A23940345439D14763996828646874370' from origin 'chrome-extension://dgcjfnnlegeodpcgieldcndpkonjcfol' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

A lot


[gergelyszabo94]

Can you just simply try in Google Chrome?

I asked the csgofloat guys to whitelist the Edge ID but I don't think they have done it.

So floats only load in Chrome and FF but Chrome is better for development.

[arthurfiorette]

Figured it out. IDK if there's a better way to add local browser extensions. Because the browser was blocking external requests because CORS.

Things I noticed (in the local extension)

the origin of the request was the extension ID. (I don't know if the store's extension is like this) This line was being blocked by colors.

https://github.com/gergelyszabo94/csgo-trader-extension/blob/fc8110afd40933df7a369687b549335177a48983/extension/src/backgroundScripts/messaging.js#L73

So, when I used cors-anywhere to get around the cors problem (just for now), the request worked.

const getRequest = new Request('https://cors-anywhere.herokuapp.com/' + `https://api.csgofloat.com/?url=${inspectLink}${price}`);

Since in the store's extension doesn't happen the cors problem, I think it's some limitation that I have to configure locally and I don't know where.

The result with cors bypassed:

[arthurfiorette]

Now, for the sake of design, I think it would be nicer when you click the inspect button, your text becomes (temporarily) copied to the clipboard or server url and the inspect command appears at the bottom. But that doesn't matter too much.

Something like that (Once already generated):

The gen code (for that image) is inside a <code> tag with 0.8rem of font-size :)

But, it's my opinion, of course.

[gergelyszabo94]

CSGOFloat uses CORS to prevent abuse by other extensions. The Chrome Webstore version's ID is whitelisted along with any Firefox extension id. I think if you install the Chrome Webstore verison and load it in dev mode too in Chrome then they are merged and have the Webstore ID in dev mode. I think that is my setup for development. Sorry for not explaining it in advance, I thought you would just use Chrome and it would work.

Your UI idea looks nice indeed, feel free to make a PR. I will add it this feature to the market listings tomorrow and might take a second look at the design.

[gergelyszabo94]

https://github.com/gergelyszabo94/csgo-trader-extension/commit/a64bb150ec3fee0038c7e6e3c57a35f4717d62eb

[gergelyszabo94]

The logic is all there now, I decided not to work on the design so I am closing the issue now, feel free to reopen or send a PR if you end up working on it.

[arthurfiorette]

Happy to help! I'm a lot busy these days, so the design will have to wait. But that doesn't matter, what matter is that it is working.