• 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)

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 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();

 

انشر على الشّبكات الاجتماعية


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

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن