ChemPal Documentation - v0.0.0
    Preparing search index...

    Class SupplierMacklin

    Macklin is a Chineese based chemical supply company. This module handles API requests with custom authentication and request signing for every call.

    Macklins client side code is very different from the other platforms. Looking at the API structure and authentication pattern, this appears to be a custom implementation rather than a standard ecommerce platform or CMS. The /api/timestamp endpoint with the specific authentication flow (using device IDs, custom signing with salt, and timestamp synchronization) is not a common pattern in major platforms. The specific implementation (with MklTmKey in localStorage, the salt ndksyr9834@#$32ndsfu, and the custom MD5-like transformation) suggests this is a custom-built platform, likely Macklin's own ecommerce system, rather than a standard off-the-shelf solution.

    The Macklin API requires a custom signature for each request to ensure authenticity. The signature is generated through the following steps:

    Step 1: Header String Generation

    • Collect all non-empty, non-object header values (excluding Content-Type)
    • Sort headers alphabetically by key (case-insensitive)
    • Format as "key=value" pairs joined by "&"
    • Append "&salt=ndksyr9834@#$32ndsfu"
    • Convert to lowercase
    • Hash using MD5

    Step 2: Parameter String Generation

    • For GET requests: Use URL parameters
    • For POST/PUT requests: Use request body
    • Sort parameters alphabetically by key (case-insensitive)
    • Format as "key=value" pairs joined by "&"
    • Append "&salt=ndksyr9834@#$32ndsfu"
    • Convert to lowercase
    • Hash using MD5

    Step 3: Final Signature

    • Concatenate header hash and parameter hash
    • Result is used as the "sign" header value

    Step 4: Timestamp Handling

    • Each request includes a "timestampe" parameter
    • For first request: Uses current timestamp + random numbers
    • For subsequent requests: Uses current timestamp + digits from previous signature
    • Server timestamp is fetched every 800 seconds to maintain sync
    Headers: {
      "X-Agent": "web",
      "X-Timestamp": "1234567890"
    }
    Parameters: {
      "keyword": "test",
      "page": "1"
    }

    // Header String: "x-agent=web&x-timestamp=1234567890&salt=ndksyr9834@#$32ndsfu"
    // Param String: "keyword=test&page=1&salt=ndksyr9834@#$32ndsfu"
    // Final Signature: headerHash + paramHash

    Hierarchy (View Summary)

    Implements

    Index

    Constructors

    constructor

    Methods

    initCache httpGetHeaders httpPost httpPostJson httpPostHtml httpGet fuzzyFilter httpGetHtml httpGetJson queryProductsWithCache execute finishProduct href getProductDataWithCache groupVariants fetch setup queryProducts titleSelector getProductData initProductBuilders generateString signRequest request fetchServerTimestamp generateRequestTimestamp validateAndUpdateTimestamp ensureStringHeader

    Properties

    query baseSearchParams controller limit products httpRequestHardLimit requestCount maxConcurrentRequests minConcurrentCycle logger productDefaults productDataCacheKey cache supplierName baseURL apiHost shipping country paymentMethods queryResults httpRequstCount TIMESTAMP_REFRESH_THRESHOLD SALT DEFAULT_TIMEOUT localStorage lastSignature headers

    Constructors

    • Creates a new instance of the supplier base class. Initializes the supplier with query parameters, request limits, and abort controller. Sets up logging and default product values.

      Parameters

      • query: string

        The search term to query products for

      • limit: number = 5

        The maximum number of results to return (default: 5)

      • Optionalcontroller: AbortController

        AbortController instance for managing request cancellation

      Returns SupplierMacklin

      // Create a supplier with default limit
      const supplier = new MySupplier("sodium chloride", undefined, new AbortController());

      // Create a supplier with custom limit
      const supplier = new MySupplier("acetone", 10, new AbortController());

      // Create a supplier and handle cancellation
      const controller = new AbortController();
      const supplier = new MySupplier("ethanol", 5, controller);

      // Later, to cancel all pending requests:
      controller.abort();

    Methods

    • Initializes the cache for the supplier. This is called after construction to ensure supplierName is set.

      Returns void

      The cache is initialized with the supplier's name and is used to store both query results and product data. This method should be called after the supplier's name is set to ensure proper cache key generation.

      class MySupplier extends SupplierBase<Product> {
        constructor() {
          super("acetone", 5);
          // supplierName is set here
          this.initCache(); // Initialize cache after supplierName is set
        }
      }

    • Retrieves HTTP headers from a URL using a HEAD request. Useful for checking content types, caching headers, and other metadata without downloading the full response.

      Parameters

      • url: string | URL

        The URL to fetch headers from

      Returns Promise<Maybe<HeadersInit>>

      Promise resolving to the response headers or void if request fails

      // Basic usage
      const headers = await supplier.httpGetHeaders('https://example.com/product/123');
      if (headers) {
        console.log('Content-Type:', headers['content-type']);
      }

      // With error handling
      try {
        const headers = await supplier.httpGetHeaders('https://example.com/product/123');
        if (headers) {
          console.log('Headers:', headers);
        }
      } catch (err) {
        console.error('Failed to fetch headers:', err);
      }

    • Sends a POST request to the given URL with the given body and headers. Handles request setup, error handling, and response caching.

      Parameters

      Returns Promise<Maybe<Response>>

      Promise resolving to the Response object or void if request fails

      // Basic POST request
      const response = await supplier.httpPost({
        path: '/api/v1/products',
        body: { name: 'Test Chemical' }
      });

      // POST with custom headers
      const response = await supplier.httpPost({
        path: '/api/v1/products',
        body: { name: 'Test Chemical' },
        headers: {
          'Authorization': 'Bearer token123',
          'Content-Type': 'application/json'
        }
      });

      // POST with custom host and params
      const response = await supplier.httpPost({
        path: '/api/v1/products',
        host: 'api.example.com',
        body: { name: 'Test Chemical' },
        params: { version: '2' }
      });

      // Error handling
      try {
        const response = await supplier.httpPost({ path: '/api/v1/products', body: { name: 'Test' } });
        if (response && response.ok) {
          const data = await response.json();
          console.log('Created:', data);
        }
      } catch (err) {
        console.error('POST failed:', err);
      }

    • Sends a POST request and returns the response as a JSON object.

      Parameters

      Returns Promise<Maybe<JsonValue>>

      The response from the POST request as a JSON object.

      // Basic usage
      const data = await supplier.httpPostJson({
        path: '/api/v1/products',
        body: { name: 'John' }
      });

      // With custom headers and error handling
      try {
        const data = await supplier.httpPostJson({
          path: '/api/v1/products',
          body: { name: 'John' },
          headers: { 'Authorization': 'Bearer token123' }
        });
        if (data) {
          console.log('Created:', data);
        }
      } catch (err) {
        console.error('POST JSON failed:', err);
      }

    • Sends a POST request and returns the response as a HTML string.

      Parameters

      Returns Promise<Maybe<string>>

      Promise resolving to the HTML response as a string or void if request fails

      TypeError - If the response is not valid HTML content

      // Basic usage
      const html = await supplier.httpPostHtml({
        path: '/api/v1/products',
        body: { name: 'John' }
      });

    • Sends a GET request to the given URL with the specified options. Handles request setup, error handling, and response caching.

      Parameters

      Returns Promise<Maybe<Response>>

      Promise resolving to the Response object or void if request fails

      // Basic GET request
      const response = await supplier.httpGet({
        path: '/products/search',
        params: { query: 'sodium chloride' }
      });

      // GET with custom headers
      const response = await supplier.httpGet({
        path: '/products/search',
        headers: { 'Accept': 'application/json' }
      });

      // GET with custom host
      const response = await supplier.httpGet({
        path: '/products/search',
        host: 'api.example.com',
        params: { category: 'chemicals' }
      });

      // Error handling
      try {
        const response = await supplier.httpGet({ path: '/products/search' });
        if (response && response.ok) {
          const data = await response.json();
          console.log('Products:', data);
        }
      } catch (err) {
        console.error('GET failed:', err);
      }

    • Filters an array of data using fuzzy string matching to find items that closely match a query string. Uses the WRatio algorithm from fuzzball for string similarity comparison.

      Type Parameters

      • X

      Parameters

      • query: string

        The search string to match against

      • data: X[]

        Array of data objects to search through

      • cutoff: number = 40

        Minimum similarity score (0-100) for a match to be included (default: 40)

      Returns X[]

      Array of matching data objects with added fuzzy match metadata

      // Example with simple string array
      const products = [
        { title: "Sodium Chloride", price: 29.99 },
        { title: "Sodium Hydroxide", price: 39.99 },
        { title: "Potassium Chloride", price: 19.99 }
      ];

      const matches = this.fuzzyFilter("sodium chloride", products);
      // Returns: [
      //   {
      //     title: "Sodium Chloride",
      //     price: 29.99,
      //     _fuzz: { score: 100, idx: 0 }
      //   },
      //   {
      //     title: "Sodium Hydroxide",
      //     price: 39.99,
      //     _fuzz: { score: 85, idx: 1 }
      //   }
      // ]

      // Example with custom cutoff
      const strictMatches = this.fuzzyFilter("sodium chloride", products, 90);
      // Returns only exact matches with score >= 90

      // Example with different data structure
      const chemicals = [
        { name: "NaCl", formula: "Sodium Chloride" },
        { name: "NaOH", formula: "Sodium Hydroxide" }
      ];

      // Override titleSelector to use formula field
      this.titleSelector = (data) => data.formula;
      const formulaMatches = this.fuzzyFilter("sodium chloride", chemicals);

    • Makes an HTTP GET request and returns the response as a string. Handles request configuration, error handling, and HTML parsing.

      Parameters

      Returns Promise<Maybe<string>>

      Promise resolving to the HTML response as a string or void if request fails

      TypeError - If the response is not valid HTML content

      // Basic GET request
      const html = await this.httpGetHtml({
        path: "/api/products",
        params: { search: "sodium" }
      });

      // GET request with custom headers
      const html = await this.httpGetHtml({
        path: "/api/products",
        headers: {
          "Authorization": "Bearer token123",
          "Accept": "text/html"
        }
      });

      // GET request with custom host
      const html = await this.httpGetHtml({
        path: "/products",
        host: "api.supplier.com",
        params: { limit: 10 }
      });

    • Makes an HTTP GET request and returns the response as parsed JSON. Handles request configuration, error handling, and JSON parsing.

      Parameters

      Returns Promise<Maybe<JsonValue>>

      Promise resolving to the parsed JSON response or void if request fails

      TypeError - If the response is not valid JSON content

      // Basic GET request
      const data = await supplier.httpGetJson({ path: '/api/products', params: { search: 'sodium' } });

      // GET request with custom headers
      const data = await supplier.httpGetJson({
        path: '/api/products',
        headers: {
          'Authorization': 'Bearer token123',
          'Accept': 'application/json'
        }
      });

      // GET request with custom host
      const data = await supplier.httpGetJson({
        path: '/products',
        host: 'api.supplier.com',
        params: { limit: 10 }
      });

      // Error handling
      try {
        const data = await supplier.httpGetJson({ path: '/api/products' });
        if (data) {
          console.log('Products:', data);
        }
      } catch (error) {
        console.error('Failed to fetch products:', error);
      }

    • Executes a product search query with caching support. First checks the cache for existing results, then falls back to the actual query if needed. The limit parameter is only used for the actual query and doesn't affect caching.

      Parameters

      • query: string

        The search term to query products for

      • limit: number = ...

        The maximum number of results to return (defaults to instance limit)

      Returns Promise<void | ProductBuilder<Product>[]>

      Promise resolving to array of product builders or void if search fails

      // Basic usage with default limit
      const results = await supplier.queryProductsWithCache("acetone");
      if (results) {
        console.log(`Found ${results.length} products`);
      }

      // With custom limit
      const results = await supplier.queryProductsWithCache("acetone", 10);
      if (results) {
        for (const builder of results) {
          const product = await builder.build();
          console.log(product.title, product.price);
        }
      }

    • Executes the supplier's search query and returns the results. This method will execute all results concurrently (to the limits set in the supplier class), and resolve to an array of product objects.

      Returns AsyncGenerator<Product, void, undefined>

      Promise resolving to an array of products

      This method is used to execute the supplier's search query and return the results.

    • Finalizes a partial product by adding computed properties and validating the result. This method:

      1. Validates the product has minimal required properties
      2. Computes USD price if product is in different currency
      3. Calculates base quantity using the unit of measure
      4. Ensures the product URL is absolute

      Parameters

      Returns Promise<Maybe<Product>>

      Promise resolving to a complete Product object or void if validation fails

      // Example with a valid partial product
      const builder = new ProductBuilder<Product>(this.baseURL);
      builder
        .setBasicInfo("Sodium Chloride", "/products/nacl", "ChemSupplier")
        .setPricing(29.99, "USD", "$")
        .setQuantity(500, "g");

      const finishedProduct = await this.finishProduct(builder);
      if (finishedProduct) {
        console.log("Finalized product:", {
          title: finishedProduct.title,
          price: finishedProduct.price,
          quantity: finishedProduct.quantity,
          uom: finishedProduct.uom,
          usdPrice: finishedProduct.usdPrice,
          baseQuantity: finishedProduct.baseQuantity
        });
      }

      // Example with an invalid partial product
      const invalidBuilder = new ProductBuilder<Product>(this.baseURL);
      invalidBuilder.setBasicInfo("Sodium Chloride", "/products/nacl", "ChemSupplier");
      // Missing required fields

      const invalidProduct = await this.finishProduct(invalidBuilder);
      if (!invalidProduct) {
        console.log("Failed to finalize product - missing required fields");
      }

    • Takes in either a relative or absolute URL and returns an absolute URL. This is useful for when you aren't sure if the link (retrieved from parsed text, a setting, an element, an anchor value, etc) is absolute or not. Using relative links will result in http://chrome-extension://... being added to the link.

      Parameters

      • path: string | URL

        URL object or string

      • Optionalparams: Maybe<RequestParams>

        The parameters to add to the URL.

      • Optionalhost: string

        The host to use for overrides (eg: needing to call a different host for an API)

      Returns string

      absolute URL

      this.href('/some/path')
      // https://supplier_base_url.com/some/path

      this.href('https://supplier_base_url.com/some/path', null, 'another_host.com')
      // https://another_host.com/some/path

      this.href('/some/path', { a: 'b', c: 'd' }, 'another_host.com')
      // http://another_host.com/some/path?a=b&c=d

      this.href('https://supplier_base_url.com/some/path')
      // https://supplier_base_url.com/some/path

      this.href(new URL('https://supplier_base_url.com/some/path'))
      // https://supplier_base_url.com/some/path

      this.href('/some/path', { a: 'b', c: 'd' })
      // https://supplier_base_url.com/some/path?a=b&c=d

      this.href('https://supplier_base_url.com/some/path', new URLSearchParams({ a: 'b', c: 'd' }))
      // https://supplier_base_url.com/some/path?a=b&c=d

    • Retrieves product data with caching support. Similar to getProductData but allows for additional parameters to be included in the cache key.

      Parameters

      Returns Promise<void | ProductBuilder<Product>>

      Promise resolving to the updated ProductBuilder or void if fetch fails

      const builder = new ProductBuilder<Product>(this.baseURL);
      builder.setBasicInfo("Acetone", "/products/acetone", "ChemSupplier");

      // Use custom fetcher with additional params
      const updatedBuilder = await supplier.getProductDataWithCache(
        builder,
        async (b) => {
          // Custom fetching logic
          return b;
        },
        { version: "2.0" }
      );

    • Groups variants of a product by their title

      Type Parameters

      • R

      Parameters

      • data: R[]

        Array of product listings from search results

      Returns R[]

      Array of product listings with grouped variants

      Create a generic method for this, the same method is used in Synthetika and could be of use with LoudWolf.

      const results = await this.queryProducts("sodium chloride");
      const grouped = this.groupVariants(results);
      // grouped is an array of product listings with grouped variants

    • Internal fetch method with request counting and decorator. Tracks request count and enforces hard limits on HTTP requests.

      Parameters

      • ...args: [input: URL | RequestInfo, init?: RequestInit]

        Arguments to pass to fetchDecorator (usually a Request or URL and options)

      Returns Promise<any>

      The response from the fetchDecorator

      Error if request count exceeds hard limit

      // Example usage inside a subclass:
      const response = await this.fetch(new Request('https://example.com'));
      if (response.ok) {
        const data = await response.json();
        console.log(data);
      }

      // With custom request options
      const response = await this.fetch(
        new Request('https://example.com', {
          headers: { 'Accept': 'application/json' }
        })
      );

    • Sets up the Macklin API client by:

      1. Validating and updating the timestamp
      2. Generating a device ID if not present
      3. Setting up the headers with the correct values

      Returns Promise<void>

      void

      MacklinApiError If the timestamp request fails or response is invalid

    • Queries the Macklin API for products matching the search term. Handles the complex response structure where products are grouped by CAS number and may have multiple variants per CAS number.

      Parameters

      • query: string

        The search term to find products

      • limit: number = ...

        Maximum number of products to return (after fuzzy filtering a search limited to 90 results))

      Returns Promise<void | ProductBuilder<Product>[]>

      Array of ProductBuilder instances or void if the request fails

      MacklinApiError if the API request fails or response is invalid

    • Extracts the English name from a Macklin product variant. Used by the base class to display product titles.

      Parameters

      Returns string

      The English name of the product

    • Creates ProductBuilder instances from Macklin product variants. This is the final step in the product search process, converting the API response into a format that can be used by the rest of the application.

      Parameters

      Returns ProductBuilder<Product>[]

      Array of ProductBuilder instances

    • Generates a random string for use in device IDs and user tokens. Can operate in two modes:

      1. Random string mode: Generates a string of specified length
      2. UUID mode: Generates a UUID-like string if no length is specified

      Parameters

      • Optionallength: number

        Optional length for random string mode

      • OptionalcharSetSize: number

        Optional size of character set to use

      Returns string

      A random string

      const string = this.generateString(20);
      // "5Wf70hQ0y1akc8rTQ8ps"

      const uuid = this.generateString();
      // "550e8400-e29b-41d4-a716-446655440000"

    • Step 1 & 2: Signature Generation Implements the core signature generation process by:

      1. Creating and hashing the header string
      2. Creating and hashing the parameter string
      3. Combining both hashes for the final signature

      Parameters

      Returns string

      The final request signature

    • Step 3: Request Processing The main request handler that:

      1. Updates and validates timestamps
      2. Prepares headers and parameters
      3. Generates and applies the signature
      4. Makes the actual API request
      5. Handles response validation and errors

      Type Parameters

      • T

      Parameters

      Returns Promise<T>

      The API response

      ApiError If the request fails or response is invalid

      TimeoutError If the request times out

    • Step 4.1: Server Timestamp Management Fetches and stores the server timestamp to maintain time synchronization. Called when local timestamp is missing or expired (over 800 seconds old, or 13 minutes).

      Returns Promise<number>

      The server timestamp

      Add the timestamp to the chrome.storage.local

      MacklinApiError If the timestamp request fails or response is invalid

    • Step 4.2: Request Timestamp Generation Generates a unique timestamp for each request using either:

      • Current time + random numbers (first request)
      • Current time + digits from previous signature (subsequent requests)

      Returns number

      A unique timestamp string for the request

    • Step 4.3: Timestamp Validation and Update Manages the timestamp lifecycle:

      • Validates current timestamp
      • Fetches new timestamp if expired
      • Converts timestamp to string format for headers

      Returns Promise<string>

      The current valid timestamp as a string

    • Ensures header values are always strings, handling arrays and null values. This prevents issues with header concatenation and type mismatches.

      Parameters

      • value: unknown

        The header value to convert

      Returns string

      A string representation of the value

      this.ensureStringHeader(["value"]) // "value"
      this.ensureStringHeader(null) // ""
      this.ensureStringHeader(123) // "123"

    Properties

    query: string

    String to query for (Product name, CAS, etc). This is the search term that will be used to find products. Set during construction and used throughout the supplier's lifecycle.

    const supplier = new MySupplier("sodium chloride", 10);
    console.log(supplier.query); // "sodium chloride"
    baseSearchParams: Record<string, string | number> = {}

    The base search parameters that are always included in search requests. These parameters are merged with any additional search parameters when making requests to the supplier's API.

    class MySupplier extends SupplierBase<Product> {
      constructor() {
        super();
        this.baseSearchParams = {
          format: "json",
          version: "2.0"
        };
      }
    }
    controller: AbortController

    The AbortController instance used to manage and cancel ongoing requests. This allows for cancellation of in-flight requests when needed, such as when a new search is started or the supplier is disposed.

    const controller = new AbortController();
    const supplier = new MySupplier("acetone", 5, controller);

    // Later, to cancel all pending requests:
    controller.abort();
    limit: number

    The maximum number of results to return for a search query. This is not a limit on HTTP requests, but rather the number of products that will be returned to the caller.

    const supplier = new MySupplier("acetone", 5); // Limit to 5 results
    for await (const product of supplier) {
      // Will yield at most 5 products
    }
    products: ProductBuilder<Product>[] = []

    The products that are currently being built by the supplier. This array holds ProductBuilder instances that are in the process of being transformed into complete Product objects.

    await supplier.queryProducts("acetone");
    console.log(`Building ${supplier.products.length} products`);
    for (const builder of supplier.products) {
      const product = await builder.build();
      console.log("Built product:", product.title);
    }
    httpRequestHardLimit: number = 50

    Maximum number of HTTP requests allowed per search query. This is a hard limit to prevent excessive requests to the supplier's API. If this limit is reached, the supplier will stop making new requests.

    50

    class MySupplier extends SupplierBase<Product> {
      constructor() {
        super();
        this.httpRequestHardLimit = 100; // Allow more requests
      }
    }
    requestCount: number = 0

    Counter for HTTP requests made during the current query execution. This is used to track the number of requests and ensure we don't exceed the httpRequestHardLimit.

    0

    await supplier.queryProducts("acetone");
    console.log(`Made ${supplier.requestCount} requests`);
    if (supplier.requestCount >= supplier.httpRequestHardLimit) {
      console.log("Reached request limit");
    }
    maxConcurrentRequests: number = 3

    Number of requests to process in parallel when fetching product details. This controls the batch size for concurrent requests to avoid overwhelming the supplier's API and the user's bandwidth.

    10

    class MySupplier extends SupplierBase<Product> {
      constructor() {
        super();
        // Process 5 requests at a time
        this.maxConcurrentRequests = 5;
      }
    }
    minConcurrentCycle: number = 100

    Minimum number of milliseconds between two consecutive tasks

    logger: Logger
    productDefaults: {
        uom: string;
        quantity: number;
        currencyCode: string;
        currencySymbol: string;
    } = ...
    productDataCacheKey: "supplier_product_data_cache"
    cache: SupplierCache
    supplierName: string = "Macklin"

    Name of supplier (for display purposes)

    baseURL: string = "https://www.macklin.cn"

    Base URL for HTTP(s) requests

    apiHost: string = "api.macklin.cn"

    The host of the Macklin API.

    shipping: ShippingRange = "worldwide"

    Shipping scope for Macklin

    country: string = "CN"

    The country code of the supplier.

    paymentMethods: PaymentMethod[] = ...

    The payment methods accepted by the supplier. This is used to determine the payment methods accepted by the supplier.

    queryResults: Product[] = []

    Override the type of queryResults to use our specific type

    httpRequstCount: number = 0

    Used to keep track of how many requests have been made to the supplier.

    TIMESTAMP_REFRESH_THRESHOLD: number = 800
    SALT: string = "ndksyr9834@#$32ndsfu"

    The salt used to sign requests.

    DEFAULT_TIMEOUT: number = 30000
    localStorage: Record<string, unknown> = {}

    Local storage object for the Macklin API client.

    Add the timestamp to the chrome.storage.local

    lastSignature: null | string = null

    The last signature used for the request

    headers: MacklinRequestHeaders = ...

    HTTP headers used as a basis for all queries.

    Settings

    Member Visibility

    On This Page

    Request Signature Generation Process
    Constructors
    Methods
    Properties