اذهب إلى المحتوى
  • 0

خطأ عند استخدام webpack و axios لانشاء chrom extension

عبد النور محمد

السؤال

أقوم بإنشاء extension chrome الذي سيحتاج إلى إجراء مكالمة API عند تلقي رسائل معينة من النص البرمجي للمحتوى. أواجه صعوبة في تقديم طلب HTTP وأعتقد أن الخطأ في تكوين webpack الخاص بي.

لقد حاولت استخدام node-fetch و axios ولا يعمل أي منهما بالنسبة لي.

يبدو ملف webpack.common.js الخاص بي كما يلي:


const path = require("path");

module.exports = {
  target: "node",
  entry: {
    popup: path.join(__dirname, "src/popup/index.tsx"),
    background: path.join(__dirname, "src/background.ts"),
    contentScript: path.join(__dirname, "src/contentScript.ts"),
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        exclude: /node_modules/,
        test: /\.tsx?$/,
        use: "ts-loader",
      },
      {
        exclude: /node_modules/,
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader", // Creates style nodes from JS strings
          },
          {
            loader: "css-loader", // Translates CSS into CommonJS
          },
          {
            loader: "sass-loader", // Compiles Sass to CSS
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
};
dispatchRequest.js:52 Uncaught (in promise) TypeError: adapter is not a function
    at dispatchRequest (dispatchRequest.js:52)

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

هذا يحدث عند استخدام axios في Service Worker الخاص بكروم,لا يمكنك استخدام axios في Service Worker , يحاول axios استخدام xhr و http عند الحصول على المحول,ولكن لا يمكنك استخدام كليهما في Service Worker, لذا استخدم fetch, لاستخدام fetch، ضع عنوان URL في host_permissions,إذا لم تستخدم host_permissions ، فستتلقى خطأ, يمكنك أن تجعل الكود كالتالي,
في ملف Manifest.json

"background": {
    "service_worker": "background.js"
  },
  "host_permissions": ["https://sample.com/*"]

في ملف background.js

const res = await fetch(baseUrl + word, {        
method: "GET",        
mode: "cors",      
});      
const txt = await res.text();

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...